概述

在最近的后台管理系统中，涉及到了角色权限分配的问题，这也是对于管理系统中较常见的需求，往往需要前后端配合来实现不同角色有不同权限。

权限分配

主要采用基于角色的权限分配模型（RABC）

通过用户登录后，后端返回用户的个人信息，其中包括了用户对应的角色，再通过对应的角色去获取对应角色的所有权限，这样前端就能获取到对应登录角色的功能菜单了。这主要是后端的配置。

路由配置

针对传过来的菜单信息，前端需要进行对应的路由注册，可是怎样进行注册显得更合理更优雅呢。

方案一：直接配置所有路由组件（不推荐）
当然，我们可以直接在routes中将所有的菜单路由进行映射，因为每个角色菜单不一样，有些功能本来就选不到。
优点： 方便简单
缺点： 虽然菜单栏选不到，但是可以通过人为的在搜索栏进行跳转，这明显是不合理的

方案二：前端根据角色提前创建好对应的路由映射数组（不推荐）
前端可以提前创建好角色与需要注册的路由的对应关系，然后可以直接通过获取到的角色再去其中进行查找，遍历注册
优点：容易理解，简单
缺点： 不方便，由于需要前端配置，如果后端新增角色，那么前端还需要修改对应的代码

方案三：根据有传过来的菜单进行动态注册（推荐）
由于每个角色的菜单权限是不一样的，所以如果能够通过菜单来进行动态注册路由无疑是一种优雅合理的方式，这里也具体说下实现
实现思路
将所有菜单的路由映射获取，然后与已得到的角色菜单跳转路径进行对比，相同的则取出，待全取出后再统一去进行注册。

如下：main文件下包含了所有的菜单分类

，其中ts文件为路由映射关系

1.读取所有的路由映射

  const routes: RouteRecordRaw[] = []// 1.读取main文件夹下的所有路由路径const RouteFiles = require.context('../router/main', true, /\.ts$/)//(路径，是否递归查询，所有.ts结尾的文件)const allRoutes: RouteRecordRaw[] = []RouteFiles.keys().forEach((routeUrl) => {const route = require('../router/main' + routeUrl.substring(1))//获取路由allRoutes.push(route.default)//加入所有路由数组})

2.与菜单功能进行对比，得到需要进行注册的路由

 function getRouteFromTarget(target: IUserMenuItem[]) {target.forEach((item) => {if (item.type === 2) {const route = allRoutes.find((r) => {//找到相同路由return r.path === item.url})if (route) {routes.push(route)//存在相同路由则保存}} else {if (item.children && item.children.length)getRouteFromTarget(item.children)}})}getRouteFromTarget(userMenu)

这里通过递归的方式进行对比，因为菜单是多级的，只对比具体可点击的功能，这里type为2时说明是一级菜单了，当然这是后端对菜单类型的配置，需要与后端协调。

3.注册路由

  routes.forEach((route) => {router.addRoute('main', route)})

角色权限分配与路由配置相关推荐

设计OA系统的用户-角色-权限分配
转载:http://www.cnblogs.com/jsping/archive/2013/01/23/2872972.html 设计OA系统的用户-角色-权限分配一,前言本文主要讲述在OA系统 ...
电子印章系统基础“角色权限”分配攻略
一套好用的电子印章系统要让各类组织实现有序用章,关键还要看"权限"设置是否灵活. 在员工规模达到数千甚至上万的组织里:哪些人可以查看印章信息.哪些人可以使用印章.哪些人可以查看用印 ...
vue后台系统管理项目-角色权限分配管理功能
vue后台系统管理项目: 技术选型:vue + element-ui 菜单权限管理模块功能角色列表查询,通过(角色名称:角色编号:状态:启用.禁用)进行角色数据搜索. 查询.重置.新建角色功能角色 ...
【SSH框架/国际物流商综平台】-05 单点登录用户-角色-权限分配 Ztree.js structs2.0 异常框架细粒度权限控制 BaseEntitity中createby degree
回顾 Shiro安全框架认证,授权,加密,会话管理(单点登录),缓存,与web集成单点登录(SSO Single Sign on)的原理就是将原有的各个系统的会话管理机制,抽取出来交给第三方集中 ...
oracle查询用户权限和角色_详解jenkins配置用户角色权限的实现方法
概述今天介绍下jenkins应该怎么去配置用户角色权限,注意jenkins 配置用户角色权限需要安装插件 Role Strategy Plugin. 1.安装 Role Strategy Plugi ...
vue实现用户登录验证 + 权限验证 + 动态路由（左侧菜单栏）
1. 技术栈说明 vue2.6 + vue-router + vuex + element-ui 2. 开始:新建项目前提条件:在个人电脑上安装好nodejs(我的是14.15.1)之后,利用nod ...
Java论坛系统--3.系统用户角色权限表结构设计
通常我们的网站都有权限控制,就像一个公司有产品.开发.运维之分,各自负责各自的业务,相互独立,有相互协作,共同完成一个任务.拥有不同权限的用户查看不同的页面,进行不同的操作. Shiro是一种轻量级的 ...
08-HR-权限管理模块（给员工分配角色，权限点管理页面开发，给角色分配权限，前端权限-页面访问权(路由)，前端权限-按钮操作权）
权限管理模块 RBAC的权限设计思想采用方案: RBAC的权限模型,RBAC(Role-Based Access control) ,也就是基于角色的权限分配解决方案权限控制目标:不同的用户登录系 ...
blob没权限 ie_vuerouter 源码和动态路由权限分配
本文首发于政采云前端团队博客:浅析 vue-router 源码和动态路由权限分配https://www.zoo.team/article/vue-router-analysis 背景上月立过一个 f ...

角色权限分配与路由配置

概述

权限分配

路由配置

角色权限分配与路由配置相关推荐

最新文章

热门文章