花裤衩-nx-admin好多轮子-动态路由
进入正题,做后台项目区别于做其它的项目,权限验证与安全性是非常重要的,可以说是一个后台项目一开始就必须考虑和搭建的基础核心功能。我们所要做到的是:不同的权限对应着不同的路由,同时侧边栏也需根据不同的权限,异步生成。这里先简单说一下,我实现登录和权限验证的思路。
- 登录:当用户填写完账号和密码后向服务端验证是否正确,验证通过之后,服务端会返回一个token,拿到token之后(我会将这个token存贮到cookie中,保证刷新页面后能记住用户登录状态),前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息(如用户权限,用户名等等信息)。
- 权限验证:通过token获取用户对应的 role,动态根据用户的 role 算出其对应有权限的路由,通过 router.addRoutes 动态挂载这些路由。
上述所有的数据和操作都是通过vuex全局管理控制的。(补充说明:刷新页面后 vuex的内容也会丢失,所以需要重复上述的那些操作)接下来,我们一起手摸手一步一步实现这个系统。
作者:花裤衩链接:https://juejin.cn/post/6844903478880370701来源:稀土掘金著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
权限篇
先说一说我权限控制的主体思路,前端会有一份路由表,它表示了每一个路由可访问的权限。当用户登录之后,通过 token 获取用户的 role ,动态根据用户的 role 算出其对应有权限的路由,再通过router.addRoutes
动态挂载路由。但这些控制都只是页面级的,说白了前端再怎么做权限控制都不是绝对安全的,后端的权限验证是逃不掉的。
我司现在就是前端来控制页面级的权限,不同权限的用户显示不同的侧边栏和限制其所能进入的页面(也做了少许按钮级别的权限控制),后端则会验证每一个涉及请求的操作,验证其是否有该操作的权限,每一个后台的请求不管是 get 还是 post 都会让前端在请求 header
里面携带用户的 token,后端会根据该 token 来验证用户是否有权限执行该操作。若没有权限则抛出一个对应的状态码,前端检测到该状态码,做出相对应的操作。
权限 前端or后端 来控制?
有很多人表示他们公司的路由表是于后端根据用户的权限动态生成的,我司不采取这种方式的原因如下:
- 项目不断的迭代你会异常痛苦,前端新开发一个页面还要让后端配一下路由和权限,让我们想了曾经前后端不分离,被后端支配的那段恐怖时间了。
- 其次,就拿我司的业务来说,虽然后端的确也是有权限验证的,但它的验证其实是针对业务来划分的,比如超级编辑可以发布文章,而实习编辑只能编辑文章不能发布,但对于前端来说不管是超级编辑还是实习编辑都是有权限进入文章编辑页面的。所以前端和后端权限的划分是不太一致。
- 还有一点是就vue2.2.0之前异步挂载路由是很麻烦的一件事!不过好在官方也出了新的api,虽然本意是来解决ssr的痛点的。。。
addRoutes
在之前通过后端动态返回前端路由一直很难做的,因为vue-router必须是要vue在实例化之前就挂载上去的,不太方便动态改变。不过好在vue2.2.0以后新增了router.addRoutes
Dynamically add more routes to the router. The argument must be an Array using the same route config format with the routes constructor option.
有了这个我们就可相对方便的做权限控制了。(楼主之前在权限控制也走了不少歪路,可以在项目的commit记录中看到,重构了很多次,最早没用addRoute整个权限控制代码里都是各种if/else的逻辑判断,代码相当的耦合和复杂)
具体实现
- 创建vue实例的时候将vue-router挂载,但这个时候vue-router挂载一些登录或者不用权限的公用的页面。
- 当用户登录后,获取用role,将role和路由表每个页面的需要的权限作比较,生成最终用户可访问的路由表。
- 调用router.addRoutes(store.getters.addRouters)添加用户可访问的路由。
- 使用vuex管理路由表,根据vuex中可访问的路由渲染侧边栏组件。
作者:花裤衩链接:https://juejin.cn/post/6844903478880370701来源:稀土掘金著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处
// router.js
import Vue from 'vue';
import Router from 'vue-router';import Login from '../views/login/';
const dashboard = resolve => require(['../views/dashboard/index'], resolve);
//使用了vue-routerd的[Lazy Loading Routes
](https://router.vuejs.org/en/advanced/lazy-loading.html)//所有权限通用路由表
//如首页和登录页和一些不用权限的公用页面
export const constantRouterMap = [{ path: '/login', component: Login },{path: '/',component: Layout,redirect: '/dashboard',name: '首页',children: [{ path: 'dashboard', component: dashboard }]},
]//实例化vue的时候只挂载constantRouter
export default new Router({routes: constantRouterMap
});//异步挂载的路由
//动态需要根据权限加载的路由表
export const asyncRouterMap = [{path: '/permission',component: Layout,name: '权限测试',meta: { role: ['admin','super_editor'] }, //页面需要的权限children: [{ path: 'index',component: Permission,name: '权限测试页',meta: { role: ['admin','super_editor'] } //页面需要的权限}]},{ path: '*', redirect: '/404', hidden: true }
];
花裤衩-nx-admin好多轮子-动态路由相关推荐
- Vue iView Admin 动态路由菜单加载 前后端分离(springboot 2.x iview admin vue 前后端分离 模型设计器 动态数据权限...
宣传官网 xb.exrick.cn 在线Demo xboot.exrick.cn 开源版Github地址 github.com/Exrick/x-bo- 开发文档 www.kancloud.cn/ex ...
- vue admin 动态路由权限管理
主要思路 通过后端接口返回数据 进行判断 (通过后端实现的权限管理有许多种),在这里 我们主要通过 关键字即匹配前端路由meta.menu值来实现权限管理通常会把路由权限列表存至vux中 箭头所指的便 ...
- java造轮子:快速搭建一个网关服务,动态路由、鉴权看完就会(含流程图)
前言 本文记录一下我是如何使用Gateway搭建网关服务及实现动态路由的,帮助大家学习如何快速搭建一个网关服务,了解路由相关配置,鉴权的流程及业务处理,有兴趣的一定看到最后,非常适合没接触过网关服务的 ...
- Vue实现角色权限动态路由详细教程,在vue-admin-template基础上修改,附免费完整项目代码
前言 vue-admin-template是一个最基础的后台管理模板,只包含了一个后台需要最基础的东西,如果clone的是它的master分支,是没有权限管理的,只有完整版vue-element-ad ...
- Vue 动态路由的实现(后台传递路由,前端拿到并生成侧边栏)
今天我们来讲讲用后台传递路由表实现动态路由的思路,因为公司的项目里路有部分用到了vuex,我就把路由部分脱离vuex整理了出来,让大家有个启发,并不是绝对的解决方案,只是思路 github:https ...
- Vue 动态路由的实现
vue项目实现动态路由的方式大体可分为两种: 前端这边把路由写好,登录的时候根据用户的角色权限来动态展示路由,(前端控制路由) 详情可参阅花裤衩大佬的项目手把手-,我当时看这个项目看了好久才明白一点逻 ...
- Vue 增加动态路由功能 【在原有系统上增加】
目录 遇到问题 1. 修改router/index.js 2. 修改 store文件夹下的 2.1 增加 modules/permission.js 2.2 增加modules/tagsViews.j ...
- ant design vue input change_Ant-design-vue项目实现动态路由
vue项目实现动态路由的方式大体可分为两种: 1.前端这边把路由写好,登录的时候根据用户的角色权限来动态展示路由,(前端控制路由) 2.后台传来当前用户对应权限的路由表,前端通过调接口拿到路由信息后处 ...
- 从壹开始 [vueAdmin后台] 之三 || 动态路由配置 项目快速开发
回顾 今天VS 2019正式发布,实验一波,你安装了么?Blog.Core 预计今天会升级到 Core 3.0 版本. 哈喽大家周三好!本来今天呢要写 Id4 了,但是写到了一半,突然有人问到了关于 ...
最新文章
- Android问题-DelphiXE5编义时提示找不到“连接器(arm-linux-androideabi-ld.exe)
- hdu-----(4514)湫湫系列故事——设计风景线(树形DP+并查集)
- 更新KB915597补丁后导致“您的windows副本不是正版”的解决方案
- 深入浅出Yolov5之自有数据集训练超详细教程
- jquery 判断数据是否重复
- 多线程之任务: Task 基础, 多任务并行执行, 并行运算(Parallel)
- IIS服务在启动默认网站(停止)时显示发生意外错误0x8ffe2740,
- 五,通道之间的数据传输
- 错误代码:1120当前Hsql数据库已被另一线程锁定
- 哨兵1号数据、精密轨道数据、DEM数据下载
- 思源黑体(魅族)、方正兰亭(小米)、冬青黑体(锤子)比较
- linux编译ko文件
- java实现将.acc格式转化为mp3格式
- cpp读取分数并进行求和化简
- got-10k数据预处理
- c语言编写单片机密码锁程序,51单片机密码锁制作的程序和流程图(很详细)
- python中tree 100 6_Python neighbors.BallTree方法代碼示例
- [2020.8.3]联想 A5(L18011) Magisk ROOT 纯净无推广 一键刷机 ZUI_3.9.068
- 使用mybatis-plus时,报错500
- PCIE,USB传输速率和带宽