前言：
- 权限管理，前端主导or后端主导？这是一个值得思考的问题，后端主导传送门https://www.jianshu.com/p/12ef029e3ab2
- 本文不讲后端如何主导，我们来讲下，并且来实现下前端主导的权限管理，动态路由的业务功能
开讲之前，先来看下图文并茂演示
- ps：由于没有后端接口的参与，本文只用模拟后端数据来实现此业务
- 1、在我们的代码中，我修改了router路由文件，在每个路由的meta中通过roles值去动态匹配
image.png
- 2、上图可以看到，我新建了两个路由模块，前端页面只会展示一个，如下图
image.png
- 3、如果我们来改变本地模拟的后端返回数据，如下图
image.png
- 4、那么前端页面就会展示出不同的菜单效果，如下图
image.png
- 5、在上面，细心的朋友应该已经发现，按钮级别的权限控制，也已经显现出来了，那么看到这里，你是否明白了呢，
后端只需要返回给我们一个权限标识数组，我们前端存储并处理这个数组来动态匹配我们的路由即可。
-
话虽这么说，但这么编码呢，下面就可以进入正文：
ps: 本业务代码是基于网上star较多的后台管理开发模版vue-admin-template来进行开发，不是从0搭建项目，望知悉。
- 1、首先我们先来启动项目，安装依赖
yarn indtall
- 2、安装依赖成功后，启动项目
yarn dev
- 2.1、如果你的项目跑不起来，报这个错
image.png
- 2.2、是因为你本地环境和core-js不兼容造成的，我们重新安装下core-js,重新启动即可
yarn add core-js --save
image.png
- 3、项目启动后，先放着，我们先来进行编码，第一步要先创建一个
枚举js，来存放我们的枚举值，也就是动态路由匹配的标识 - 4、在
src/utils文件夹下新建enums.js文件，文件内编码一个通用的枚举选项通用对象，如下
/**
* 枚举选项通用对象
*/
export class Item {
/**
*
* @param key {string} 后台接口需要的值
* @param comment {string} 前端显示值
* @param deprecated {boolean} 是否废弃
* @param checked {boolean} 默认是否选中
*/
constructor(key, comment, extend, { deprecated = false, checked = false } = {}) {
/**
* 后台接口需要的值
* @type {string}
*/
this.key = key
/**
* 前端显示值
* @type {string}
*/
this.comment = comment
/**
* 前端备注
* @type {string}
*/
this.extend = extend
/**
* 是否废弃
* @type {boolean}
*/
this.deprecated = deprecated
/**
* 默认是否选中
* @type {boolean}
*/
this.checked = checked
}
}
- 5、再来编码一个前端橘色权限代码对象，后面在改造路由文件那里会用到这个对象，代码如下
/**
* 角色权限代码
*/
export const AuthorityCode = {
ROLE_ORG_ADMIN: new Item('ROLE_ORG_ADMIN', '管理员角色权限代码'),
// 资源中心
resourceCenterModel: new Item('resourceCenterModel', '资源中心'),
// 资源列表
resourceCenter: new Item('resourceCenter', '资源列表'),
// 资源列表---页面内按钮权限标识
// 资源列表---发布资源
resourceCenter_mybtn1: new Item('resourceCenter_mybtn1', '发布资源'),
resourceCenter_mybtn2: new Item('resourceCenter_mybtn21', '我的发布'),
/** ***************************************************************************************** */
// 商城管理
shopModel: new Item('shopModel', '商城管理'),
// 商品列表
shopList: new Item('shopList', '商品列表'),
// 商品列表---页面内按钮权限标识
// 商品列表---新增商品
shopList_mybtn1: new Item('shopList_mybtn1', '新增商品'),
/** ***************************************************************************************** */
}
- ps：Item里面的key值和comment值你可以根据你自己的实际情况修改，只要和后端能对应上即可，请注意，
new Item 前后的key尽量保持一致，不一致不确定会有啥子问题，没测试过 - 6、接下来再改造下路由文件
src/router.js - 先来解释下这个文件里的必要解释的代码
export const constantRoutes = []
- 这个数组里的路由文件你可以理解为，不需要权限的路由都在这个数组里，那么需要权限的路由肯定就不能放在这个数组里了，所以我们要新建个异步路由数组，也就是需要权限动态展示的路由数组
/** 异步路由 */
export const asyncRoutes = []
- 那么什么路由不需要权限，放在
constantRoutes数组内呢，登录页面肯定不需要权限，404页面肯定也不需要，然后再比如你想让哪个页面不需要你就放在这个数组内，比如我想让
dashboard页面不需要权限，大家都能看到并访问，那我就放里面即可，所以，基本的代码如下
网友评论