vue-鉴权的两种方式之路由拦截

前端_路边生人 2020-11-09 23:49:04
vue 方式 之路 vue- 两种


vue中鉴权的两种方法

常用的鉴权有两种:一种是路由拦截,一种是动态路由。

路由拦截

通过vue-router的beforeEach方法进行每一次路由访问的拦截,判断拦截信息中是否有鉴权要求或者权限校验,以此来实现鉴权。
如果权限不够,访问的路径虽然存在但会被拦截。

动态路由

在登录后根据用户信息以及权限动态地添加正确的权限路由,如果权限不够,访问的路径是不存在的。

比较

路由拦截实现起来相对简单,只需在登录的时候保存用户权限信息,然后编写路由的时候将需要鉴权的路由加上权限信息,然后在beforeEach拦截中进行判断处理是否可进入,并且,即使通过f5刷新页面,
只要用户信息权限信息保存下来,就可以实现鉴权。

而动态路由,实现起来相对麻烦,可能还需要要后端配合,不过看起来或者安全性上更高级一些,毕竟你即使知道有某个权限路由,但是我根本就不渲染,你就绝对无法走进去。动态路由需要登录后记录用户权限
菜单列表,这个列表可能是后端给的也可能是前端自己总结。前端自己总结的话就需要根据不同权限用户生成不同的路由列表,然后在登录后进行按需渲染。且这个动态路由加载判断的条件以及实现逻辑会比较复
杂。需要考虑f5刷新后动态路由重新加载,因为此时不会再次经历登录操作,所以动态路由加载不会放在登录功能的回调中,但又必须是登陆后渲染,所以就同样放在router的beforeEach这个方法里,只是
判断条件需要改为用户权限信息已存在但动态路由为渲染加载的,具体实现请看例子。

例子-路由拦截

// 文件目录
|--webapp
|----src
|------api
|------pages
|------routers
|--------modules
|--------index.js
|------utils
|------App.vue
|------main.js
|----package.json
|----vue.config.js
// webapp/src/routers/modules/user.js
// 路由可以根据模块区分,我这边只是细化了,你也可以把所有路由都放一个文件夹,只是可能看起来稍多
const userRouter = [
{ path: '/user/router1', // 这样写可以实现按需加载,打包细化,webpackChunkName就是打包生成的文件名前缀
component: () => import(/* webpackChunkName: "router1" */ '@/pages/user/router1.vue'), meta: { // 这里随便放一些自定义的信息,permission就是权限信息,后续会在beforeEach中进行判断,必须amin才能进入
// 有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用 命名 chunk,一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)。
// https://router.vuejs.org/zh/guide/advanced/lazy-loading.html title: 'router1', permission: 'admin' } },{
path: '/user/router2', component: () => import(/* webpackChunkName: "router2" */ '@/pages/user/router2.vue'), meta: { title: 'router2' } }
]
export default userRouter;
// webapp/src/router/index.js
// 这里把所有细化的模块路由汇总
import Vue from 'vue';
import Router from 'vue-router';
import userRouter from '@/routers/modules/user.js';
// vue使用vue-router这个插件
Vue.use(Router);
const router = new Router({
routes: [ { path: '/', redirect: '/home' }, ...userRouter, { path: '*', redirect: '/404' } ]
});
export default router;
// webapp/src/main.js
// 一般router的beforeEach都会放到main.js中,在整个vue实例化时加载。
import Vue from 'vue';
import router from '@/routers/index.js';
// 这里就可以进行vue-router的beforeEach拦截了,你也可以放其他地方,我比较喜欢放这
router.beforeEach((to, from, next) => {
document.title = to.meta.title || ''; // 这里先获取下用户信息,我偷懒用sessionStorage存了
// 里面包含了用户权限,用户各种信息等
const user = JSON.parse(sessionStorage.getItem('ms_user')); // 这里必须加上to.path !== 'login'的判断,不然会陷入无限循环,
// 因为逻辑是第一次进来,判断用户信息不存在,即!user为true,由于使用的是next('/login')而非next(),
// 会再次进入路由跳转,next()方法没有参数是直接进入页面,不会再次进入路由拦截,有参数则会,因为跳转,
// 所以再次进入路由,再次判断,再次进入路由,再次判断,循环往复无限循环
// 所以一定要加to.path !== 'login'的判断
if (!user && to.path !== '/login') { next('/login'); } else if (to.meta.permission) { user.permission === to.meta.permission ? next() : message.alert('没有权限');
} else { next(); }});
new Vue({
router, render: h => h(App)
}).$mount('#app');

如果希望交流可以私信或者wx:zilian_taoyaoyao

版权声明
本文为[前端_路边生人]所创,转载请带上原文链接,感谢
https://segmentfault.com/a/1190000037779617

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple