24、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)

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 钩子对路由的每次跳转进行管理，
每次跳转都进行检查，
如果目标路由不存在于当前路由中，
取消跳转，转为跳转错误页。

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

24、vue-router 鉴权 守卫

おすすめ