guns前端代码中增加对按钮的权限处理

一、背景说明

在使用开源guns的最新版框架中，发现vue3版本的前端框架并未实现对按钮的权限控制，结合之前研究过的smart-admin，由于guns使用的是vue3.0版本，自定义指令的内容与之前的smart-admin略微有所区别，本文记录改造guns前端增加对按钮的访问权限功能。

二、改造过程

1.增加directives文件夹

在src目录下增加directives文件夹。

2.新建index.js

在该文件夹下新建index.js

import directive from './directives';

const importDirective = app => {
  /**
   * privilege指令 v-privilege="options"
   * options = {
   *  value:    /当前按钮的唯一权限识别/,
   * }
   */
  app.directive('privilege', directive.privilege);
};

export default importDirective;

3.新建directives.js

在directives文件夹下新建directives.js

import privilege from './module/privilege';

const directives = {
  privilege
};

export default directives;

4.新建privilege.js

在directives文件夹下新建module\privilege.js。新建module文件夹的目的是，万一后面还有其他自定义指令需要增加，方便扩展。

// 页面内按钮过滤
import store from '@/store/index';
export default {
  mounted: function (el, binding) {
    //如果是超级管理员，则拥有所有按钮的权限
    if (store.state.user.user.roles.includes("superAdmin")) {
      return true;
    }
    //如果非超级管理员，则需要判断用户的权限列表中是否包含该权限，
    //authorities，在用户登录成功后进入index.vue时进行了获取赋值，binding.value为 v-privilege后面跟的按钮编码
    if (!store.state.user.user.authorities.includes(binding.value)) {
      el.parentNode.removeChild(el);
    }
  }
};

5.修改main.js

在main.js的合适位置增加以下内容

import importDirective from '@/directives';

/**
 * 注册指令
 */
importDirective(app);

6.使用自定义指令

在需要有权限按钮的地方直接使用v-privilege进行处理就可以了。
例如在app应用中新建按钮增加权限，改造如下：

<template #toolbar>
            <a-space>
              <a-button type='primary' @click='openEdit()'  v-privilege="'AUTH_APP_ADD_BUTTON'">
                <template #icon>
                  <plus-outlined />
                </template>
                <span>新建</span>
              </a-button>
            </a-space>
          </template>

其中AUTH_APP_ADD_BUTTON为后台配置该按钮的权限代码，具体后台配置的部分内容guns中已经实现了，登录系统在”应用权限“->"菜单管理"中可以进行维护。

guns的官网地址为：[https://www.stylefeng.cn/]