vue-router 鉴权 守卫

路由导航守卫

导航守卫就是路由跳转过程中的一些钩子函数。vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局路由守卫，组件路由守卫，路由独享守卫。
每个守卫方法接受三个参数：

作用：守卫页面跳转 监听页面跳转 在页面跳转前或者跳转后执行一些操作。
路由的钩子函数 有三个参数 分别是 to到哪儿去 from 从哪儿来next执行下一步

• to：即将要进入的目标路由对象
• from：当前导航正要离开的路由
• next：执行下一步（必须要调用该方法）
  • next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
  • next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
  • next(’/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: ‘home’ 之类的选项以及任何用在router-link的to prop 或 router.push 中的选项。
  • next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError()注册过的回调。

全局路由守卫

所谓全局路由守卫，在全局中都可以使用。
全局前置守卫beforeEach(to,from,next)，全局后置守卫afterEach(to,from)

 router.beforeEach((to,from,next)=>{
 
​    next()  //决定页面是否继续向下走    next(true);
 
 });

组件路由守卫

跟methods:{}同级别税额，组件路由守卫是写在每个单独的vue文件里面的路由守卫
beforeRouteEnter (to, from, next)：在路由进入之前，组件实例还未渲染，所以无法获取 this 实例，只能通过 vm 来访问组件实例

beforeRouteEnter (to, from, next) {
  // 这里还无法访问到组件实例，this === undefined
  next( vm => {
    // 通过 `vm` 访问组件实例
  })
}

beforeRouteUpdate (to, from, next)： 同一页面，刷新不同数据时调用
beforeRouteLeave (to, from, next)：离开当前路由页面时调用

路由独享守卫

指在单个路由配置的时候也可以设置的钩子函数
beforeEnter(to,from,next)

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

实现鉴权的方式分两种：

1、通过vue-router addRoutes 方法注入路由实现控制

通过请求服务端获取当前用户路由配置，编码为 vue-router 所支持的基本格式（具体如何编码取决于前后端协商好的数据格式），通过调用 this.$router.addRoutes 方法将编码好的用户路由注入到现有的 vue-router 实例中去，以实现用户路由。
addRoutes 方法仅仅是帮你注入新的路由，并没有帮你剔除其它路由！

2、通过vue-router beforeEach 钩子限制路由跳转

通过请求服务端获取当前用户路由配置，通过注册 router.beforeEach 钩子对路由的每次跳转进行管理，每次跳转都进行检查，如果目标路由不存在于当前路由中，取消跳转，转为跳转错误页。

方法①和②的区别是一个是自动的，一个是手动的。