Vue路由守卫

Vue路由守卫

路由守卫，简单理解来说就是，当用户要进行一些操作时，我需要用户的一些信息或数据或行为，我判断过后，才会同意用户进行操作，说到这里，我想大家心里都或多或少有点理解了吧，官方一点的解释就是进行操作的鉴权，当操作与之条件匹配时，操作成功，当操作与之不匹配时，操作终止，作用就是是对路由进行权限控制。

在Vue中，路由守卫分为三种：全局路由守卫、独享路由守卫以及组件内路由守卫

全局路由守卫

全局路由守卫，顾名思义，一旦配置，那么作用范围就是所有的路由，全局路由又分为全局前置守卫和全局后置守卫

全局前置守卫

全局前置守卫，组件初始化时调用，每次路由切换之前调用，路由切换之前指的就是，举个例子说，当前我在A路由组件，我要切换到B路由组件，那么前置路由守卫就是在我点了切换按钮，但B路由组件还没有被呈现在页面上的时候被调用。

//全局前置守卫
router.beforeEach((to,from,next) =>{
  //第一个参数to，包含的内容是切换后的路由对象，也就是跳转后的路由对象
  //第二个参数from，包含的内容的是切换前的路由对象，也就是跳转前的路由对象
  //第三个参数next()，是否往下执行，执行的话，如果不写的话路由就不会跳转，操作将会终止
})

全局后置守卫

全局后置守卫，组件初始化时调用，每次路由切换之后调用，路由切换之后指的就是，举个例子说，当前我在A路由组件，我要切换到B路由组件，那么前置路由守卫就是在我点了切换按钮B路由组件呈现到页面中后被调用。

router.afterEach((to,from) =>{
  //第一个参数to，包含的内容是切换后的路由对象，也就是跳转后的路由对象
  //第二个参数from，包含的内容的是切换前的路由对象，也就是跳转前的路由对象
})

独享路由守卫

某一个路由所单独享用的路由守卫,独享路由守卫只有前置没有后置

{
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue'),
    meta: { isAuth: true },
    beforeEnter: (to, from, next) => {
        if (to.meta.isAuth) { //判断是否需要授权
            if (localStorage.getItem('school') === 'qs') {
                next()  //放行
            } else {
                alert('抱歉，您无权限查看！')
            }
        } else {
            next()  //放行
        }
    }
}

组件内守卫

当使用路由规则进入该组件或离开该组件时，就会触发组件内守卫的调用，而组件内守卫的作用于范围也仅限于该组件

//进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {
  //第一个参数to，包含的内容是切换后的路由对象，也就是跳转后的路由对象
  //第二个参数from，包含的内容的是切换前的路由对象，也就是跳转前的路由对象
  //第三个参数next()，是否往下执行，执行的话，如果不写的话路由就不会跳转，操作将会终止
},
//离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {
  //第一个参数to，包含的内容是切换后的路由对象，也就是跳转后的路由对象
  //第二个参数from，包含的内容的是切换前的路由对象，也就是跳转前的路由对象
  //第三个参数next()，是否往下执行，执行的话，如果不写的话路由就不会跳转，操作将会终止
}