本文略长，倡议珍藏。
线上网站演示成果地址：http://ashuai.work:8891/home
GitHub仓库地址：https://github.com/shuirongsh...
所谓的权限，其实指的就是：用户是否能看到，以及是否容许其对数据进行增删改查的操作，因为当初开发我的项目的支流形式是前后端拆散，所以整个我的项目的权限是后端权限管制搭配前端权限管制独特实现的
后端权限
1. 晓得是哪个用户（角色）发的申请
- token判断（前端申请头中传过来，通过申请拦截器）
- userid判断（前端申请头中传过来，通过申请拦截器）
- cookie判断（用的少）
- session判断（用的很少）
2. 权限设计模式
RBAC模式~基于角色的权限访问控制（Role-Based Access Control）是商业系统中最常见的权限治理技术之一。
对于什么是RBAC模式的概念本文这里不做赘述，大家能够这样了解：
2.1 RBAC模式
- 某个零碎有一些人在应用，然而应用这个零碎的这些人分为两个派别。有老板派（老板、老板小姨子、老板小舅子等），也有打工仔派（张三、李四、王二、麻子）。
- 零碎有一些页面用于展现数据，作为老板派的相干工作人员，必定是哪个页面都可能看到，毕竟公司都是老板的，必须什么都能看到
- 而作为打工仔派的工作人员，必定是权限比拟低了，只能看到一个业绩页面（假如业绩页面记录了本人每个月为公司发明的业绩）
- 这个案例中的老板派和打工仔派就是两个角色，而老板、老板小姨子、老板小舅子和张三、李四、王二、麻子这些用户就是隶属于角色的用户
- 用户是角色的具象化体现
- 用户的数量个别都大于角色的数量的（想一下...）
- 所以咱们在做权限管制的时候，只须要管制角色能看到那个页面即可，至于用户就让他隶属于这个角色便是
- 通过用户和角色进行关联，也做到了复用和解耦
- 角色能看到哪个页面，取决于角色和菜单页面进行的关联（通过勾选菜单树关联）
步骤如下：
- 给对应角色赋予（调配）相应菜单权限
- 让新建的用户隶属于某个角色，就是给新建的用户调配一下角色
2.2 后端建表
失常状况下须要五张表：
- 菜单表（用于存储系统的菜单信息，如菜单的名字、点击这个菜单要去跳转的路由url、以及这个菜单的icon图标名、菜单id等...）
- 角色表（用于存储系统的角色信息，如角色名、角色id、角色备注等...）
- 角色菜单表（用于存储某个角色能看到菜单id有哪些，一个角色id对应多个菜单id，一对多关系）
- 用户表（用于存储用户隶属于哪个角色，比方老板小舅子就是隶属于老板角色，以及用户名、用户id、用户备注啥的...）
- 组织表（用于记录角色属于哪个组织，再大一些的零碎我的项目会建此表，小我的项目没有也行）
三张表也能用
咱们将角色菜单表，糅在角色表中，这样的话，只有新建菜单表、角色表（蕴含角色菜单信息）、用户表，依据用户的用户名和明码进行登录（后端会依据用户名和明码查问到这个用户隶属于那个角色下，从而返回此用户对应角色的菜单信息数据）
本文演示建两张表
为了更好的便于大家了解，本文只新建两张表，一张是菜单表，另一张是角色表（角色表中存此角色能看到的单id），而登录的时候，大家抉择角色登录，其实抉择用户登录从某种意义上来说，也是相当于角色登录。
第一步：
角色登录发申请，后端返回此角色对应的菜单树数据（须要前端进一步加工一下），前端获取菜单树数据当前，将其存到vuex中比方是menuTree数组字段，el-menu组件再取到vuex中的menuTree数组数据应用，依据这个菜单树数据进行主动递归渲染
对于el-menu组件的递归自调用，能够参见笔者之前的这篇文章：https://segmentfault.com/a/11... 若对于组件递归常识忘了，能够参见笔者的这篇文章：https://segmentfault.com/a/11...
第二步：
第一步中，实现了el-menu组件的渲染展现，然而还少了路由表树结构数组数据（因为点击菜单须要进行路由跳转），所以咱们还须要再搞一份数据routerTree，这个routerTree数据是依据后端返回的菜单树数据，加工成合乎路由表树结构的数组，这个数组是给路由表应用的
routerTree的值是动静，因为不同角色的routerTree不一样- 对应的路由表还有动态的，不变的，比方
404路由、login路由、首页home路由 - 动态路由前端间接写死即可，动静路由应用
router.addRoutes(routerTree)将其增加到路由表中即可
至于刷新页面
vuex中数据失落，就重发一次申请，或者本地存一份都行的实际上，刷新页面，并不是
vuex中的数据失落，而是，而是vuex中的数据初始化了（回到最后的样子，最后时，vuex中的数据原本就是空的）
通过上述两步骤，一个权限零碎的根本样子构造就进去了，只不过还有一些细节须要解决，这个请持续往下浏览
前端权限细化管制
前端权限细化分类大抵能够分为四种：
- 菜单的权限管制
- 页面的权限管制
- 按钮的权限管制
- 字段的权限管制
1.菜单的权限管制（以左侧导航菜单为例）
不同角色的用户登录当前，看到的是不同的菜单内容。比方：
- 一般角色（的用户），只能看到某一个菜单
- 管理员角色能看到所有的菜单
- 以
el-menu菜单组件进行举例说明
2.页面的权限管制
- 角色没登录时，手动在地址栏输出
url地址跳转，就强制用户跳转到登录页 - 角色登录后，手动在地址栏输出不存在的
url（或者本人不能看的url）地址跳转，让其跳转404页面 - 某些非凡的页面，还能够应用
vue-router中的beforeRouteEnter再进行细化管制
假如打工仔张三，想要去看老板的页面，因为本人登录时，后端返回的菜单树中没有老板页面的数据，所以路由表中也没有老板页面的路由，所以地址栏
url间接跳转时，就会跳转到一个不存在的路由页面，就不会显示出货色了。对于路由，大家也能够这样了解：就是当地址栏中输出对应的
path即url时，路由表大佬去做对应匹配，匹配到了当前，再去渲染对应的.vue组件从而出现对应的数据内容（匹配不到那就404呗）
3.按钮的权限管制
按钮的管制，能够细分为两块：一是 : 是否能看到这个按钮、另外是 : 能看到不过是否能点击这个按钮（按钮是否禁用）
- 按钮是否展现，取决于是否给角色调配了按钮权限。
- 如有的只能看到
查看按钮，有的增删改查按钮都能够看到 - 再一个，咱们能够把按钮当做是一个非凡的菜单页面
- 最初，要有一个规定限度，新增节点时，能够新增菜单节点，也能够新增按钮节点，只不过按钮节点永远是最底层的地位，不能在按钮节点下再去新增页面（无意义操作）
- 不了解下面那句话，请持续往下浏览
留神，在我的项目中最好不要应用禁用按钮去管制权限，如果角色用户没有某个按钮的权限，间接删除这个节点即可，比方
v-if，或el.parentNode.removeChild(el)，因为应用禁用按钮去管制权限存在肯定危险，如笔者的这篇文章：https://segmentfault.com/a/11...非凡状况下，应用禁用按钮也能够去调配管制权限，具体情况具体分析
4. 字段的权限管制
如下的表格：
| 姓名 | 年龄 | 他乡 | 喜好 |
|---|---|---|---|
| 孙悟空 | 500 | 花果山 | 大闹天宫 |
比方年龄字段是隐衷，只有老板能看到员工的年龄，老板的小姨子和小舅子都不能看到，这个需要的实现能够前端依据角色id进行过滤；或者后端再建表做映射关系，返回给前端。
篇幅起因，这里不赘述了。后续闲暇了，笔者再写一篇介绍
后端建菜单表和角色表
咱们先从后端开始写，对于每个字段的意思，笔者在代码中提到了
1. 菜单表
两张表都在代码中，大家浏览完文章当前，能够在GitHub仓库中自行获取
1.1菜单表数据库截图
这里有几个字段须要着重介绍一下：
1.2pid字段
pid字段，即为：parentId是父级节点字段，就是以后节点的父节点，后端在数据库中存储前端菜单树数据时，是不会存成树结构的数据的（JSON模式除外，但这种形式很少用）后端存储的数据是：把树结构的数据铺平（拍平）当前的数据。
比方咱们有这样一个树结构数据
let treeData = [ { id: 1, name: '中国', children: [ // 有的后端喜爱应用child字段，一个意思 { id: 3, name: '北京', }, { id: 4, name: '上海', children: [ { id: 6, name: '浦东新区' } ] }, ] }, { id: 2, name: '美国', children: [ // 有的后端喜爱应用child字段，一个意思 { id: 5, name: '纽约', }, ] },]数据库中可不会间接存一个树结构，数据库会把树结构拍平存起来，即这样存储：
| pid | id | name |
|---|---|---|
| 0 | 1 | 中国 |
| 1 | 3 | 北京 |
| 1 | 4 | 上海 |
| 4 | 6 | 浦东新区 |
| 0 | 2 | 美国 |
| 2 | 5 | 纽约 |
留神！数据库中不须要存储
children字段，children字段是一个虚构字段，是当后端共事查问菜单表数据结构时，将扁平化的数据转成树结构时，递归代码创立的，并返回给前端。实际上，后端共事能够间接将
sql语句查问到的扁平化数据库数据数组间接丢给前端，至于加工成树结构，也能够由前端共事去加工，不过失常状况下，扁平化数据转成树结构数据都是后端做的，不过前端也要会写相应递归函数
也就是相当于这样的JSON
[ { "pid": 0, "id": 1, "name": "中国", }, { "pid": 1, "id": 3, "name": "北京", }, { "pid": 1, "id": 4, "name": "上海", }, { "pid": 4, "id": 6, "name": "浦东新区", }, { "pid": 0, "id": 2, "name": "美国", }, { "pid": 2, "id": 5, "name": "纽约", }]至于树结构如何拍平的，能够笔者写了两个递归函数大家能够看看，函数写法二的可读性更好一些哦
函数写法一：
// 拍平加pid字段 function pidFn(data, sqlArr = [], pid = 0) { // 假如顶级的pid为0 data.forEach((item) => { // 遍历失去每一项 let obj = JSON.parse(JSON.stringify(item)) // 深拷贝一份 obj.pid = pid // 给每一项都赋值pid delete obj.children // 拍平不须要children sqlArr.push(obj) // 丢到sqlArr数组中 if (item.children) { // 有子节点就递归操作 pidFn(item.children, sqlArr, item.id) // 以后项的id就是子项的pid } }) return sqlArr // 一波操作，最初再丢进去即可}let res = pidFn(treeData)console.log('拍平加父id字段', res);函数写法二：
function pidFn(data) { let sqlArr = [] // 定义一个数组用于存储拍平后的数据 function digui(data, pid) { // 专门定义个递归函数用户清晰的存储数据 data.forEach((item) => { // 遍历树结构数据 let obj = JSON.parse(JSON.stringify(item)) // 深拷贝一份 obj.pid = pid // 给每一项都赋值pid delete obj.children // 拍平了，就不须要children了 sqlArr.push(obj) // 丢到sqlArr数组中 if (item.children) { // 如果树结构有子节点就持续递归操作 // 以后节点的id就是子节点的pid digui(item.children, item.id) // 递归函数接管树结构数据，当前pid参数 } }) } digui(data, 0) // 递归函数首次执行，假如顶级pid是0 return sqlArr // 将递归的后果丢进来}let res = pidFn(treeData)console.log('拍平加父id字段', res);1.3pids字段
pids字段是所有的父级节点的组合的数组，比方一个三级节点，它的pid是二级节点的id，而它的pids是所有的父级节点，包含二级节点id和一级节点id。
当然数据库存储，不能间接存一个数组进去，所以toString()转成字符串存储即可1.4cUrl字段
cUrl即componentUrl组件的地址的意思。就是路由表中用于读取组件的component函数。比方有以下一个路由表：
{ path: "/welcome", name: "welcome", component: resolve => require(["@/views/pages/welcome.vue"], resolve),},在数据库中存储为：
| url | cUrl | ... |
|---|---|---|
| /welcome | /pages/welcome.vue | ... |
示意：当地址栏的url值为/welcome时，去读取并渲染@/views/pages/welcome.vue文件，即做到了url和页面的对应关系
其余的字段含意，看上述图片的正文即可了解
1.5菜单表sql代码
DROP TABLE IF EXISTS `menus`;CREATE TABLE `menus` ( `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '惟一id', `pid` int(11) NOT NULL COMMENT '下级父节点的id，即为parentId（留神，children字段是不必存储，children字段是递归时，增加进去的）', `pids` varchar(255) CHARACTER SET utf8 COLLATE utf8_unicode_ci NULL DEFAULT NULL COMMENT '下级节点的id数组转的字符串', `name` varchar(255) CHARACTER SET utf8 COLLATE utf8_unicode_ci NULL DEFAULT NULL COMMENT '树节点的名字', `url` varchar(255) CHARACTER SET utf8 COLLATE utf8_unicode_ci NULL DEFAULT NULL COMMENT '即为菜单的path', `cUrl` varchar(255) CHARACTER SET utf8 COLLATE utf8_unicode_ci NULL DEFAULT NULL COMMENT '当拜访url时，前端路由须要读取并渲染的.vue文件的门路，个别是绝对于views里的', `type` int(255) NULL DEFAULT NULL COMMENT 'type为1是菜单，为2是按钮', `icon` varchar(255) CHARACTER SET utf8 COLLATE utf8_unicode_ci NULL DEFAULT NULL COMMENT '菜单的图标名', `sort` int(255) NULL DEFAULT NULL COMMENT '菜单的高低排序', `status` int(255) NULL DEFAULT NULL COMMENT '是否开启字段，1是开启，2是敞开', `isHidden` int(255) NULL DEFAULT NULL COMMENT '是否暗藏菜单，1是显示，2是暗藏', `isCache` int(255) NULL DEFAULT NULL COMMENT '是否缓存，1是缓存，2是不缓存', `remark` varchar(255) CHARACTER SET utf8 COLLATE utf8_unicode_ci NULL DEFAULT NULL COMMENT '备注', `isDel` int(255) NULL DEFAULT 1 COMMENT '删除标识，1代表未删除可用，2代表已删除不可用', PRIMARY KEY (`id`) USING BTREE) ENGINE = InnoDB AUTO_INCREMENT = 105 CHARACTER SET = utf8 COLLATE = utf8_unicode_ci ROW_FORMAT = Compact;2. 角色表
2.1角色表数据库截图
2.2menuIds字段
理论我的项目中，会有一个角色菜单表用于做角色和菜单的映射关系，这里笔者间接糅在一块了，便于大家了解。
2.3角色表sql代码
DROP TABLE IF EXISTS `roles`;CREATE TABLE `roles` ( `roleId` int(255) NOT NULL AUTO_INCREMENT COMMENT '每一个角色的id', `roleName` varchar(255) CHARACTER SET utf8 COLLATE utf8_unicode_ci NULL DEFAULT NULL COMMENT '每一个角色的name名字', `roleRemark` varchar(255) CHARACTER SET utf8 COLLATE utf8_unicode_ci NULL DEFAULT NULL COMMENT '角色的备注', `menuIds` text CHARACTER SET utf8 COLLATE utf8_unicode_ci NULL COMMENT '以后的这个角色能看到（勾选）的菜单的id（给角色赋予菜单）', PRIMARY KEY (`roleId`) USING BTREE) ENGINE = InnoDB AUTO_INCREMENT = 32 CHARACTER SET = utf8 COLLATE = utf8_unicode_ci ROW_FORMAT = Compact;前端应用角色去登录管制页面的权限
1. 登录页（抉择角色发申请获取对应菜单树数据）
1.1效果图
1.2代码思路
el-select点击下拉框
<el-selectv-model="value"placeholder="请抉择角色登录"@visible-change=" (flag) => { if (flag) { listRoles(); } }"> <el-option v-for="item in roleList" :key="item.value" :label="item.roleName + ' (' + item.roleRemark + ')'" :value="item.menuIds" > </el-option></el-select>发申请获取角色列表有哪些
async listRoles() { const res = await this.$auth.listRoles(); if (res.code == 0) { this.roleList = res.data; }}接口返回角色列表有以下数据
[ { "roleId": 29, "roleName": "超级管理员", "roleRemark": "能看到所有", "menuIds": "1,19,21,42,30,31,41,22,32,33,27,34,39,40,35,36,37,38,100,101,99,25,26" }, { "roleId": 30, "roleName": "前端", "roleRemark": "只能看前端相干", "menuIds": "1,19,21,42,30,31,41,22,32,33,27,34,39,40,35" }, { "roleId": 31, "roleName": "后端", "roleRemark": "只能看后端相干", "menuIds": "1,36,37,38,100,101" }]当咱们抉择以超级管理员登录时，就依据超级管理员roleId为29对应的能看到的menuIds有哪些的菜单，去查问对应的菜单数据。
/auth/roleMenuByMenuId?menuIds=1,19,21,42,30,31,41,22,32,33,27,34,39,40,35,36,37,38,100,101,99,25,26后端接口如下：
// 依据角色id查问能看到的菜单有哪些（前提是这些菜单是启用状态的）route.get('/roleMenuByMenuId', (req, res) => { // 1. 接管前端传的参数 let menuIds = req.query.menuIds // 2. 拼接sql语句筹备去数据库查问 let sql = `SELECT * FROM menus WHERE id IN (${menuIds}) AND isDel = 1 AND status = 1` // 数据库连接池建设连贯去数据库中捞数据 pool.getConnection(function (err, connection) { if (err) { throw err } connection.query(sql, function (error, results, fields) { connection.release() let apiRes = { code: 0, msg: "胜利", // 留神！留神！留神！ // 这时候捞到的数据还是扁平化的数组 // 须要将扁平化的数组转成树结构 // 所以这里定义了一个changeTree函数用于加工数据 data: changeTree(results, 0, 0) } res.send(apiRes) }) })})如果大家对于express写接口，做数据库查问忘了，能够看下笔者之前写的一篇全栈文章温习一下忘记的常识：https://segmentfault.com/a/11...
打印查到的results后果：扁平化数组数据截图：
所以须要有个函数办法（工具类），可能将扁平化构造转成树结构，函数如下：
/** * 想要将扁平化数组转成树结构，首先必须晓得顶级的pid是啥（0） * 第一步，假如咱们只须要找顶级的这一项， * 只须要比照一下那一项的pid是这个pid即可 * 而后递归即可 * */// 通过pid将扁平化的数组转成树结构。给树结构增加level字段（数据库中没存，当然存也能够）module.exports = function changeTree(arr, pid, level) { let treeArr = [] level = level + 1 // 增加层级字段 arr.forEach((item, index) => { if (item.pid == pid) { // 把不是这一项的残余几项，都丢到这个children数组外面，再进行递归（这一项曾经确定了，是父级，没必要再递归了） let restArr = arr.filter((item, index) => { return item.pid != pid }) item['children'] = changeTree(restArr, item.id, level) // 这里须要进行传id当做pid（因为本人的id就是子节点的pid） if (item.children.length == 0) { delete item.children } // 加一个判断，若是children: [] 即没有内容就删除，不返回给前端children字段 item['level'] = level // 增加层级字段 // 操作完当前，把一整个的都追加到数组中去 treeArr.push(item) } }); return treeArr}调用：changeTree(results, 0, 0) 这里要告知顶级的pid，这里我假如为0，同时level层级从第0层开始
通过这样一加工再返回给前端，就是一个树结构的数据了，如下图：
这样的话，前端就能够应用了
因为业务简略，所以这里笔者的后端express没有分层解决
对于后端的分层，前端共事能够这样简略了解：
管制层 接管参数 校验参数 解决参数 .....业务层 数据处理查、改什么的...长久层 生成sql语句 数据库操作 数据返回2.加工后端返回的菜单树数据存在vuex中以供应用
2.1登录胜利跳转
async loginIn() { // vuex中发相应的申请 const res = await this.$store.dispatch("menu/tree_menu", this.value); if (res.code == 0) { // 存一份登录的角色名 let i = this.roleList.findIndex((item) => { return item.menuIds == this.value; }); sessionStorage.setItem("username", this.roleList[i].roleName); // 而后登录胜利去跳转 this.$message({ type: "success", message: "登录胜利", }); this.$router.push({ path: "/" }); }},2.2vuex中的操作~el-menu须要的菜单树
- 留神，上述图中，后端是返回了菜单树，然而！然而！仍旧是不能间接应用！
- 起因是前端还须要再进行一次加工，将菜单树加工成两个树结构的数据
- 一个是
menuTree: [], // el-menu须要的菜单树 - 另一个是
routerTree: [] // vue-router须要的路由树 el-menu菜单树须要的menuTree的值是不蕴含按钮节点的，而因为按钮被当做了非凡的页面节点，所以这里须要过滤一下vue-router须要的路由树routerTree也要依据后端返回的菜单树进行加工，加工成具备component函数属性值的路由树数据
咱们先看el-menu菜单树须要的menuTree数据的加工函数
// 加工后端返的树结构数据 是给菜单递归组件el-menu应用的export function setElMenuTreeWithoutBtn(oldTree, newTree) { oldTree.forEach((item) => { let newTreeObj = { ...item, children: null } if (item.children) { // 有子集内容，且子集内容为菜单type=1才去递归（按钮type=2就不要了，这样就过滤了...） if (item.children[0].type == 1) { setElMenuTreeWithoutBtn(item.children, newTreeObj.children = []) } } if (newTreeObj.children == null) { // 为null阐明没有子集，或者子集都是按钮被忽略了，删除之 delete newTreeObj.children } newTree.push(newTreeObj) }) return newTree}调用此办法是在vuex中的登录逻辑中
const state = { isCollapse: false, menuTree: [], // el-menu须要的菜单树 routerTree: [] // vue-router须要的路由树};const mutations = { ... }const actions = { // 相当于login登录接口 tree_menu({ commit, dispatch }, menuIds) { return new Promise((resolve, reject) => { roleMenuByMenuId(menuIds) .then( (res) => { let menuTree = res.data[0].children // 顶级节点PC不要 commit('TREE_MENU', setElMenuTreeWithoutBtn(menuTree, [])) // 加工菜单树给到el-menu组件应用 commit('ROUTE_TREE', setRouterTree(menuTree, [])) // 加工菜单树给到路由表应用 sessionStorage.setItem("token", "token"); // 模仿token存储 sessionStorage.setItem("menuIds", menuIds); // 存一份以后角色的menuIds setBtnAuth(menuTree) // 设置按钮 resolve(res) // 抛出去告知后果 } ).catch(...) }) }}最终加工好的menuTree树结构数据，会被el-menu组件应用：
留神，el-menu组件放在视图层组件中：
让咱们来看一下layout文件夹中的index.vue组件是如何应用menuTree数据的吧
layout-->index.vue
<el-menu ref="elMenu" :collapse="isCollapse" :default-active="activeIndex" class="elMenu" background-color="#333" text-color="#B0B0B2" active-text-color="#fff" :unique-opened="false" router @select="menuSelect" > <!-- 一般菜单（前端写死固定，如首页、欢送页等） --> <el-menu-item index="/"> <i class="el-icon-s-home"></i> <span slot="title">首页</span> </el-menu-item> <!-- 递归动静菜单（后端返回，不同角色菜单不统一） --> <myitem :data="menuArr"></myitem> </el-menu> import myitem from "./components/myitem.vue"; components: { myitem } data(){ return { menuArr: this.$store.state.menu.menuTree } }再温习一下递归组件
layout-->components-->myitem.vue
<template> <div> <template v-for="(item, index) in data"> <!-- isHidden值等于1才去显示，等于2暗藏 --> <template v-if="item.isHidden == 1"> <!-- 因为有子集和无子集渲染html标签不一样，所以要分为两种状况：状况一：有子集的状况：--> <template v-if="item.children"> <!-- 有子集去递归显示 --> <el-submenu :key="index" :index="item.url"> <template slot="title"> <i class="el-icon-platform-eleme"></i> <span>{{ item.name }}</span> </template> <myitem :data="item.children"></myitem> </el-submenu> </template> <!-- 状况二：没子集的状况 --> <template v-else> <!-- 没子集间接显示内容即可 --> <el-menu-item :key="index" :index="item.url"> <i class="el-icon-eleme"></i> <span slot="title">{{ item.name }}</span> </el-menu-item> </template> </template> </template> </div></template><script>export default { name: "myitem", props: { data: { type: Array, default: [], }, }, // 留神： 在template标签上应用v-for，:key="index"不能写在template标签上，因为其标签不会被渲染，会引起循环谬误};</script>对于组件的name属性，其实不写也行，不过当须要应用到组件的递归自调用或应用keep-alive缓存组件时，就得加上了。当然也有别的计划...
到目前为止，菜单可能显示了，然而点击菜单却是空白页，因为少了路由表树结构数据了
2.3vuex中的操作~vue-router须要的路由树
路由表中的路由分为动态路由（固定路由）和动静路由（后端依据不同的用户/角色返回的路由），比方能够有以下的动态固定路由：
// 固定的动态路由，比方登录页、首页、404页等...const staticRoutes = [ { path: '/', // component: resolve => require(["@/layout/index.vue"], resolve), component: Layout, // 二者一个意思 redirect: '/home', children: [ { path: "/home", name: "home", component: resolve => require(["@/views/home.vue"], resolve), }, ] }, { path: '/login', component: resolve => require(["@/views/login.vue"], resolve), }, { path: '/404', component: resolve => require(["@/views/404.vue"], resolve), }, // { path: '*', redirect: '/404' } ]这里有一个坑，404页面的匹配兜底路由在最初，然而不能间接写在动态路由中的最初一个，会刷新主动到404页面了。因为是动静路由的做法，所以404页面的匹配兜底路由拼接在vue-router的路由树数组数据中即可。所以上述的{ path: '*', redirect: '/404' }笔者正文掉了。
登录获取到后端返回的树结构数据后，加工，给路由表应用
// vuex中roleMenuByMenuId(menuIds).then( (res) => { let menuTree = res.data[0].children // 顶级节点PC不要 commit('ROUTE_TREE', setRouterTree(menuTree, [])) })setRouterTree加工函数
// 加工后端返的树结构数据 是给vue-router路由表应用import Layout from '@/layout/index.vue'let page404 = { path: '*', redirect: '/404' }export function setRouterTree(oldTree, newTree) { oldTree.forEach((item) => { let newTreeObj = { path: item.level == 2 ? `/${item.url}` : `${item.url}`, name: item.name, component(resolve) { require([`@/views${item.cUrl}`], resolve) }, meta: { title: item.name } } if (item.level == 2) { // 如果是二级，就对立应用layout组件视图层 // newTreeObj['component'] = Layout // 这两个一个意思 newTreeObj['component'] = (resolve) => { require(["@/layout/index.vue"], resolve) } } if (item.children) { if (item.children[0].type == 1) { // 路由表树结构也不须要按钮哦，只有type等于1的菜单 setRouterTree(item.children, newTreeObj.children = []) } } newTree.push(newTreeObj) }); return newTree.concat(page404) // 将404页面拼接到最初面，做通配路由应用}打印加工好的路由树后果：
留神箭头指向的中央，component函数要去援用指向解析组件哦，这个肯定要有
所以commit('ROUTE_TREE', setRouterTree(menuTree, []))的值给到路由表去应用
那么？路由表如何应用加工好的这个路由表树数据呢？应用vue的addRoutes办法增加即可，在登录胜利当前。加工好当前，间接增加即可
import router from "@/router";import store from "@/store";async loginIn() { const res = await this.$store.dispatch("menu/tree_menu", this.value); if (res.code == 0) { /** * 登录胜利当前也要动静增加一下路由tip1，或者异步重加载一下tip2 * 否则会呈现首次登录router.beforeEach中动静路由办法不触发 * 即首次登录点击动静菜单局部呈现空白页（刷新后失常） * */ router.addRoutes(store.state.menu.routerTree); // tip1: 注掉成果显著 let i = this.roleList.findIndex((item) => { return item.menuIds == this.value; }); sessionStorage.setItem("username", this.roleList[i].roleName); this.$message({ type: "success", message: "登录胜利", }); this.$router.push({ path: "/" }); // setTimeout(() => { // tip2:注掉成果显著 // location.reload(); // }, 10); } },最初一步，刷新页面时，vuex初始化，所以在beforeEach钩子函数中从新发申请，获取菜单树数据即可
// 路由全局拦挡router.beforeEach((to, from, next) => { // 去登录页面必定放行的，管他有没有token if (to.path === '/login') { next() } // 去的不是登录页面，再看看有没有token认证 else { const token = sessionStorage.getItem('token') if (!token) { // 没token，就让其回到登录页登录 next({ path: "/login" }) } else { // 有token，再看看有没有菜单路由信息 if (store.state.menu.routerTree.length > 0) { // 有菜单信息，就放行 next() } else { // 没有菜单信息，就再发一次申请获取菜单信息 let menuIds = sessionStorage.getItem('menuIds') store.dispatch('menu/tree_menu', menuIds).then((res) => { if (res.code == 0) { router.addRoutes(store.state.menu.routerTree) next({ ...to, replace: true }) // 确保动静路由已被齐全增加进去了 } }) } } }})前端应用角色去登录管制按钮的权限
按钮的权限思路，在登录时，依据菜单树转成一个按钮树，有按钮的权限，就为true，没有就间接没有。
而后再定义函数去获取某某页面下的某某按钮的值是否为true，为true就阐明有权限，为false就阐明没有权限，能够应用函数引入形式，或者自定义指令形式。
将菜单树的按钮转成key/value布尔值按钮树模式
指标按钮树结构
{ "前端框架": { "vue页面": { "新增vue": true, "编辑vue": true, "删除vue": true, "占位按钮": true }, "react页面": { "新增react": true, "编辑react": true }, "angular": { "agl1": { "agl1新增/编辑": true, "agl1删除": true }, "agl2": {} } }, "后端框架": { "springBoot": {}, "myBatis": {}, "特工001": {}, "特工002": {} }, "零碎设置": { "角色治理": {}, "菜单治理": {} }}定义函数去设置
仍旧是在登录的时候，去依据菜单树去设置按钮树
roleMenuByMenuId(menuIds).then( (res) => { let menuTree = res.data[0].children // 顶级节点PC不要 //...... setBtnAuth(menuTree) // 设置按钮树 resolve(res) // 抛出去告知后果 } )设置按钮树递归函数
// 按钮权限设置export function setBtnAuth(tree, btnAuthObj = {}) { // 循环加工 tree.forEach((item) => { if (item.type == 1) { // 类型为1阐明是菜单 btnAuthObj[item.name] = {} // 菜单就加上一个对象属性 if (item.children) { // 若有子集，就递归加对象属性 // 因为对象是援用类型，所以间接赋值整个按钮权限对象就都有了 setBtnAuth(item.children, btnAuthObj[item.name]) } } if (item.type == 2) { // 类型为2阐明是按钮 btnAuthObj[item.name] = true // 按钮的赋值true示意有按钮权限 } }) // 加工结束当前，丢进来以供应用 sessionStorage.setItem('btnAuthObj', JSON.stringify(btnAuthObj)) return btnAuthObj}获取按钮树递归函数
// 按钮权限获取export function getBtnAuth(whichPage, btnName) { // 查找：那个页面下的什么按钮名字是否有权限 let flag // 找到了，才阐明有权限 function getBtn(whichPage, btnName, btnAuthObj = JSON.parse(sessionStorage.getItem('btnAuthObj'))) { for (const key in btnAuthObj) { if (key == whichPage) { flag = btnAuthObj[key][btnName] } else { getBtn(whichPage, btnName, btnAuthObj[key]) } } } getBtn(whichPage, btnName) // 递归查找标识赋值 return flag ? true : false // 找到了为true，没找到undefined，这里再判断一下，返回布尔值}函数应用形式
<el-button type="danger" v-if="isShowDeleteBtn">删除vue</el-button>computed: { isShowDeleteBtn() { return getBtnAuth("vue页面", "删除vue"); }, },自定义指令形式
<el-button type="primary" v-btn="{ vue页面: '新增vue' }">新增vue</el-button><el-button type="primary" v-btn="{ vue页面: '编辑vue' }">编辑vue</el-button>自定义指令v-btn
import { getBtnAuth } from "@/utils";export default { inserted(el, binding, vnode) { const whichPage = Object.keys(binding.value)[0] const btnName = Object.values(binding.value)[0] let flag = getBtnAuth(whichPage, btnName) if (!flag) { el.parentNode.removeChild(el) } }, unbind(el, binding, vnode) { }}相当于去查问，查 某个页面 中有没有 某个按钮
共用的动静路由组件
比方好几个页面，都是同一个构造内容，只是id不同，这个时候就须要应用动静路由组件了传参
/dynaOne/:001
<template> <div> <span>共用的动静组件：</span> <h2> 依据 <span class="val">{{ val }}</span> 的不同发相应申请 </h2> </div></template><script>export default { data() { return { val: Object.values(this.$route.params)[0].slice(1), /* 留神url的配置： 思路是多个路由path应用同一个组件，须要加上监听，解决路由变了，组件不刷新的问题 身份标识id间接url中拼接即可应用 url:'xxx/:001' */ }; }, watch: { $route: { handler: function () { this.val = Object.values(this.$route.params)[0].slice(1); }, }, },};</script><style>.val { color: brown; font-size: 36px; margin: 0 8px;}</style>总结
- 通过这种形式，就能够做到动静菜单得了。
- 然而纸上得来终觉浅，还是得实操
- 又因为篇幅起因，笔者对于一些细节文章中没有提到
- 所以大家能够去笔者公布出的网站上看成果
- 以及star一下笔者的仓库
- 将代码拉下来跑起来，一点点捋清代码思路
- 这样印象才会粗浅
比方后端接口如何写，前端菜单树
el-tree勾选传参细节问题，详情，请看代码另外，后盾管理系统，都有
tab标签页，动静路由的tab标签页在三层菜单中会呈现缓存问题，后续笔者不忙了，会持续更新这个仓库的哦。等等...
大家能够随便新增角色，并赋予菜单权限，不过不能编辑菜单数据哦。笔者为了升高本人的数据不被打乱了
如果帮到了您，还请赏赐一个star，也是咱更文的能源。（PS:写文章真的要花费不少工夫哦）