Vue的路由守卫

1.什么是路由守卫？

我们先来看看官网文档的描述：

【Navigation Guards 】As the name suggests, the navigation guards provided by vue-router are primarily used to guard navigations either by redirecting it or canceling it. There are a number of ways to hook into the route navigation process: globally, per-route, or in-component.

简单来说，路由守卫就是对用户将要访问的路径进行判断拦截，只有满足一定条件的情况下才可以进入到对应的页面，否则将会被拦截。从而达控制用户权限的目的。比如，用户进入“个人中心”页面，只有在已登陆的情况下才可以进入，在没有登陆态的情况下，将会被拦截并冲路由重映射到登陆页。

2.Vue的路由守卫分类

    1.全局路由守卫

    2.局部路由守卫

    每类路由守卫都有三个生命周期。

3.路由守卫的生命周期

1.全局路由守卫的生命周期：

（1） router.beforeEach((to,from,next)=>{  })

生效时机：导航触发时

（2） router.beforeResolve((to,from,next)=>{  })

生效时机：导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后

（3）router.afterEach((to,from)=>{  })

2.局部路由守卫的生命周期：

（1）beforRouteEnter(to,from,next){  }

注意：在渲染改组件对应的路由被加载进界面前调用，不能使用'this'获取组件实例，因为守卫执行前，组件实例还被没被创建

（2）beforeRouteUpdate(to,from,next){ }

注意：当前路由发生改变时调用，可以使用'this'访问组件实例

（3）beforeRouterLeave(to,from,next){  }

注意：导航离开该组件对应的路由时调用，可以使用'this'访问组件实例

4.每个守卫方法接受三个参数

1.to Router类型，即将要进入的目标路由对象

2.from Router类型，当前导航正要离开的路由

3.next Function类型，使用该方法来调用resolve这个钩子，执行的结果根据next方法调用的参数确定。next方法参数：

 （1）next()  进行管道中的下一个钩子，如果全部执行完了，则导航的状态就是confirmed

（2）next(false) 中断当前的导航

（3）next('/'） 跳转到一个不同的地址，当前导航被中断，然后进行一个新的导航

（4）next(error) 导航会被终止且该错误会被传递给router.onError（）

5.完整的导航解析流程

1.导航被触发

2.在失活的组件里调用离开守卫

3.调用全局的beforeEach守卫

4.在重用的组件里调用beforeRouteUpdate

5.在路由配置里调用beforeEnter

6.解析异步路由组件

7.在被激活的组件里调用beforeRouterEnter

8.调用全局的beforeResolve守卫

9.导航被确认

10.调用全局的afterEach钩子

11.触发DOM更新

12.用创建好的实例调用beforeRouterEnter守卫中传给next的回调函数

6.一个例子

假设登陆态为loginState，取值为ture（已登陆），false（未登陆）

在路由配置文件中写入：

router.beforeEach(function(to,from,next(){

    if(to.path==='/'){

        if(loginState){                                 //判断当前路由是否需要进行守卫判断

            next();   //验证通过，放行

        }else{

            next('/login')     //验证失败，被拦截，且进入登陆页面

       }else{                                             //当前路由不需要进行守卫判断，直接通过

            next();

       }

})

7.提示

局部路由守卫写在组件的js段中，无需写在mounted或methods方法中。