vue-admin-template实现前端主导的权限管理业务功

前言：

• 权限管理，前端主导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页面不需要权限，大家都能看到并访问，那我就放里面即可，所以，基本的代码如下