vue-router鉴权的方式
1、通过vue-router addRoutes 方法
通过请求服务端获取当前用户路由配置,编码为 vue-router 所支持的基本格式(具体如何编码取决于前后端协商好的数据格式),通过调用 this.$router.addRoutes 方法将编码好的用户路由注入到现有的 vue-router 实例中去,以实现用户路由。
addRoutes 方法仅仅是帮你注入新的路由,并没有帮你剔除其它路由!
2、通过vue-router beforeEach 钩子限制路由跳转
通过请求服务端获取当前用户路由配置,通过注册 router.beforeEach 钩子对路由的每次跳转进行管理,每次跳转都进行检查,如果目标路由不存在于当前路由中,取消跳转,转为跳转错误页。
方法①和②的区别是一个是自动的,一个是手动的。
路由守卫
作用:守卫页面跳转 监听页面跳转 在页面跳转前或者跳转后执行一些操作。
路由的钩子函数 有三个参数 分别是 to到哪儿去 from 从哪儿来 next执行下一步
第一种是全局的守卫
写在 router/index.js 里
一共有两个
- 路由进入之前 router.beforeEach
- 路由离开之后 router.afterEach
第二种是组件级守卫 - 路由进入之前beforeRouterEnter{to,from,next}
- 路由更新之前beforeRouterUpdate{to,from,next}
- 路由离开之前beforeRouterLeave{to,from,next}
还有就是单个独享的路由首位 - beforeEnter{to,from,next}