后台管理系统权限管理实现步骤

1.管理员给账户分配角色

通过api接口的调用给用户添加不同的参数字段标识

2.管理员给角色分配权限

通过api接口的调用，将不同的权限参数绑定给相应的角色

3.路由权限

与权限有关的组件路由提取到一个新的js文件中，作为动态权限的路由文件
在请求用户信息的函数中，额外添加一个根据用户信息中的角色ID请求权限数据的API请求，并将两次请求的信息拼接在一起，形成一个既包括用户信息，又包括用户权限信息的新用户信息对象，并存储在vuex中

 async getUserInfo(store) {// 获取用户信息const res = await sysprofile()// 获取角色基本信息const res2 = await sysuser(res.data.userId)// 通过Object.assign()方法将两次请求的数据拼接成新的用户信息store.commit('addUserInfo', Object.assign({}, res.data, res2.data))// 根据合并后用户信息中的权限字段，在所有动态路由中筛选出符合条件的路由const ArrRouter = asyncRouter.filter(item => {return res.data.roles.menus.includes(item.name)})// 通过Router.addRoutes()方法，将筛选出来的路由添加到路由信息中，Router.addRoutes([...ArrRouter, { path: '*', redirect: '/404', hidden: true }])}// 由于Router.addRoutes()方法添加的路由只能在更新后被加载，所以需要将'/404'放在此处，避免初次进入时直接报404错误，并且在路由前置守卫中，需要做如下配置：// 在获取用户信息的地方添加next(to.fullPath)// 注意事项：router.matcher = newRouter.matcher 用于重置路由，一方面避免下次登录时会继承上个用户登录的路由权限，另一方面也是为了避免相同的路由节点被重复追加
```htmlawait Store.dispatch('user/getUserInfo')next(to.fullPath)

4.菜单权限

背景：addRoutes添加路由信息后，根据路由信息渲染出来的侧边栏中，仍然只有静态路由的选项，没有新动态添加的那几个权限菜单
原因：this.$router.options.routes无法动态获取路由，所以在addRoutes动态添加之后，this.$router.options.routes捕获到的仍只有添加前的静态路由
解决办法：将静态路由和动态路由拼接在一起，并存在vuex中，让渲染侧边栏的数组从vuex中获取动态的数据```html// constantRoutes是导入的静态路由，ArrRouter是筛选出来的动态路由store.commit('route/getRouterList', [...constantRoutes, ...ArrRouter], { root: true })

更改侧边栏的渲染数据来源

this.$store.state.route.routerList

5.按钮权限

根据用户信息中是否包含某个按钮权限字段来决定该按钮是否渲染，以此实现按钮权限

btnPermission: {inserted(dom, obj) {if (!store.state.user.userInfo.roles.points.includes(obj.value)) {dom.style.display = 'none'}},componentUpdate(dom, obj) {if (!store.state.user.userInfo.roles.points.includes(obj.value)) {dom.style.display = 'none'}}}```

后台管理系统权限管理实现步骤相关推荐

VUE后台管理系统权限管理
VUE后台管理系统权限管理(面试路由守卫) 1.背景后台管理系统中总会遇到权限分配的问题:这也是一道vue的很经典的面试问题 2.解决思路权限管理无非前端或者后台解决先说一下前端解决的思路:在设 ...
P22-Vue3后台管理系统-权限管理之路由守卫判断⽤户登录状态
P22-Vue3后台管理系统-权限管理之路由守卫判断⽤户登录状态文章目录 P22-Vue3后台管理系统-权限管理之路由守卫判断⽤户登录状态 1.概述 2.mock接口返回token 2.1.mock ...
后台管理系统权限管理详解
权限管理简述权限管理: 你可以在后台通过一个 tree 控件或者其它展现形式给每一个页面动态配置权限,之后将这份路由表存储到后端.当用户登录后得到roles,前端根据roles去向后端请求可访问的路 ...
SSM框架实现后台管理系统权限管理（用户、菜单、角色）
文章目录后台管理系统开发一.数据库表结构设计 1.菜单表menu 2.用户表user 3.角色表role 4.角色权限表role_menu 5.用户角色表user_role 二.项目准备 1.创建 ...
后台管理系统——权限管理
1.做到权限管理就要让菜单动态生成后端给我返回,当前登录账户的路径,就像["/home","/produce","/abc"]这样子返回, ...
后台管理系统权限管理
一.实现权限控制 - 基于RBAC权限控制理念页面权限的思路 1.默认有静态路由,前端本地拥有完整的动态路由,服务器端返回该用户的页面权限标识,筛选出属于当前用户的动态路由,然后通过router.a ...
保险后台管理系统/订单管理/保单管理/客户管理/咨询管理/保险原型/保单详情/客户详情/权限管理/部门管理/账号管理/保险系统原型/汽车保险后台管理系统/角色管理/咨询详情/axure原型/需求文档
保险后台管理系统/订单管理/保单管理/客户管理/咨询管理/保险原型/保单详情/客户详情/权限管理/部门管理/账号管理/保险系统原型/汽车保险后台管理系统/角色管理/咨询详情/axure原型/需求文档 ...
Java-Web机试练习题一、后台管理系统——管理员管理模块
题目:后台管理系统--管理员管理模块一. 语言和环境 1. 实现语言:JAVA 语言. 2. 环境要求:MyEclipse/Eclipse + Tomcat + MySql. 3. 使用技术:Jsp ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...

后台管理系统权限管理实现步骤

1.管理员给账户分配角色

2.管理员给角色分配权限

3.路由权限

4.菜单权限

5.按钮权限

后台管理系统权限管理实现步骤相关推荐

最新文章

热门文章