Vue—路由守卫

### 12.路由守卫

1. 作用：对路由进行权限控制

2. 分类：全局守卫、独享守卫、组件内守卫

3. 全局守卫:

```js

   //全局前置守卫：初始化时执行、每次路由切换前执行
   router.beforeEach((to,from,next)=>{
      console.log('beforeEach',to,from)
      if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
         if(localStorage.getItem('school') === 'atguigu'){ //权限控制的具体规则
            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//修改网页的title
      }else{
         document.title = 'vue_test'
     }
  })

```

4. 独享守卫:

```js

   beforeEnter(to,from,next){
      console.log('beforeEnter',to,from)
      if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
         if(localStorage.getItem('school') === 'atguigu'){
            next()
         }else{
            alert('暂无权限查看')
            // next({name:'guanyu'})
        }
      }else{
         next()
     }
  }

```

5. 组件内守卫：

```js

   //进入守卫：通过路由规则，进入该组件时被调用
   beforeRouteEnter (to, from, next) {
  },
   //离开守卫：通过路由规则，离开该组件时被调用
   beforeRouteLeave (to, from, next) {
  }

```

全局守卫代码：

全局守卫:
// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'
//创建一个路由器，但还没有暴露
const router =  new VueRouter({
    routes:[
        {
            name:'guanyu',
            path:'/about',
            component:About,
            meta:{title:'关于'}
        },
        {
            name:'zhuye',
            path:'/home',
            component:Home,
            meta:{title:'主页'},
            children:[
                {
                    name:'xinwen',
                    path:'news',
                    component:News,
                    meta:{isAuth:true,title:'新闻'}
                    //meta数组被称为路由元信息，可以放置自定义数据
                },
                {
                    name:'xiaoxi',
                    path:'message',
                    component:Message,
                    meta:{isAuth:true,title:'消息'},
                    children:[
                        {
                            name:'xiangqing',
                            path:'detail',
                            component:Detail,
                            meta:{isAuth:true,title:'详情'},
                            //props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件。
                            // props:{a:1,b:'hello'}
                            //props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件。
                            // props:true
                            //props的第三种写法，值为函数
                            props($route){
                                return {
                                    id:$route.query.id,
                                    title:$route.query.title,
                                    a:1,
                                    b:'hello'
                                }
                            }
                        }
                    ]
                }
            ]
        }
    ]
})
//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
//to：要去哪个目标路由；from：来自哪个路由
//next（）表示放行，即可以进行下一步
router.beforeEach((to,from,next)=>{
    console.log('前置路由守卫',to,from)
    if(to.meta.isAuth){ //判断是否需要鉴权
        if(localStorage.getItem('school')==='*****'){
            next()
        }else{
            alert('学校名不对，无权限查看！')
        }
    }else{
        next()
    }
})
//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from)=>{
    console.log('后置路由守卫',to,from)
    document.title = to.meta.title || '硅谷系统'
})
export default router

组件内守卫代码：

<template>
    <h2>我是About的内容</h2>
</template>
<script>
    export default {
        name:'About',
        /* beforeDestroy() {
            console.log('About组件即将被销毁了')
        },*/
        /* mounted() {
            console.log('About组件挂载完毕了',this)
            window.aboutRoute = this.$route
            window.aboutRouter = this.$router
        },  */
        mounted() {
            // console.log('%%%',this.$route)
        },
        //通过路由规则，进入该组件时被调用
        beforeRouteEnter (to, from, next) {
            console.log('About--beforeRouteEnter',to,from)
            if(to.meta.isAuth){ //判断是否需要鉴权
                if(localStorage.getItem('school')==='atguigu'){
                    next()
                }else{
                    alert('学校名不对，无权限查看！')
                }
            }else{
                next()
            }
        },
        //通过路由规则，离开该组件时被调用
        beforeRouteLeave (to, from, next) {
            console.log('About--beforeRouteLeave',to,from)
            next()
        }
    }
</script>