Vue路由守卫

1. 路由守卫认识

1. 作用： 对路由进行权限控制
2. 分类： 全局守卫、独享守卫、组件内守卫

提示

其中路由配置中的meta属性可以用来添加数据信息标识是否需要校验权限, 另外如果不用meta属性可以用name属性，不过如果路由校验的比较多的话, 在if判断中写的很繁琐，建议使用meta属性，另外其他属性query,params是Vue自己进行传值用的，是不能用的

2. 全局守卫

// 全局前置守卫： 初始化时执行、每次路由切换前执行
router.beforeEach((to, from, next)=>{
    console.log('beforeEach', to, from)
    if(to.meta.isAuth){
        // 权限控制具体规则
        if(localStorage.getItem('school')==='qinghua'){
            next()// 放行
        }else{
            alert('暂无权限查看')
            // next({name: 'guanyu'})
        }
    }else{
        next() //放行
    }
})
// 全局后置守卫，初始化时执行、每次路由切换后执行
router.afterEach((to,from)=>{
    console.log('afterEach', to, from)
    if(to.meta.title){
        document.title = to.meta.title
    }else{
        document.title = 'vue_test'
    }
})

3. 独享守卫

独享守卫就是只能给其中一个路由提供权限校验

routes: [
    {
        path: '/about',
        component: About
    },
    {
        path: '/home',
        component: Home,
        children: [
            {
                path: 'news',
                component: News
            },
            {
                path: 'message',
                component: Message,
                beforeEnter(to, from, next){
                    if(to.meta.isAuth){ // 判断当前路由是否需要进行权限控制
                        if(localStorage.getItem('school')==='yinhai'){
                            next()
                        }else{
                            alert('暂无权限查看')
                        }
                    }else{
                        next()
                    }
                },
                children:[
                    {
                        path: 'detail/:id/:content',
                        component: Detail,
                        name: 'mingxi',
                        props: true
                    },
                ]
            }
        ]
    }
]

4. 组件内守卫

主要用于和组件内部强耦合的代码逻辑处理，组件内守卫分为两个：beforeRouteEnter, beforeRouteLeave, 区别于全局前置后置守卫，前置后置守卫都是路由进入或者跳转都会被触发的，而组件内守卫根据时机不同，触发的组件内路由守卫不同。

index.js

routes: [
    {
        path: '/about',
        component: About,
        meta: {isAuth: true}
    },
    .....
]

Demo.vue

<template>
  <h2>我是About的内容</h2>
</template>

<script>
export default {
  name: "About",
  // 通过路由规则，进入该组件时被调用
  beforeRouteEnter(to, from, next){
    console.log('About---beforeRouteEnter')
    if(to.meta.isAuth){ // 判断是否需要鉴权
      if(localStorage.getItem('schoole')==='北大'){
        next()
      }else{
        alert('学校不对，无权限查看')
      }
    }else{
      next()
    }
  },
  // 通过路由规则, 离开该组件时被调用
  beforeRouteLeave(to, from, next){
    console.log('About---beforeRouteLeave')
    next()
  }
}
</script>