功能权限与指令

青锋的功能权限控制使用了两种方式进行实现。

判断和计算属性实现

1、查询用户信息-查询用户享有的功能权限集合。
2、在列表页面（list）中获取权限集合，通过includes包含字段进行判断。
3、数据权限，调用计算属性的authOpera进行处理。
代码参考src/system/user/index.vue，目前通过判断实现权限的控制只保留此处，用于大家的参考与学习。

数据获取

在上面代码中通过查询的数据在store中进行存储，方便后续直接使用。

功能权限控制

通过：v-if=”authButton.includes(‘user:info’)” 进行判断 ，目前代码中仅在User/index.vue保留判断控制权限的模式，供大家参考学习。

<a-button
size="small"
@click="() => info(record)"
v-if="authButton.includes('user:info')"
>详情</a-button
>
<a-button
size="small"
type="primary"
v-if="authButton.includes('user:edit')"
@click="() => edit(record)"
>编辑</a-button
>
<a-button
size="small"
type="danger"
v-if="authButton.includes('user:del')"
@click="() => del(record.id)"
>删除</a-button
>
<a-button
size="small"
type="primary"
v-if="authButton.includes('user:resetPwd')"
@click="() => resetPwd(record)"
>密码重置</a-button
>

数据权限控制

数据权限通过authOpera(record)进行判断，主要对数据的创建人和创建组织进行判断。 authButton.includes(‘user:edit’) && authOpera(record)

 <a-menu-item
 v-if="
 authButton.includes('user:edit') &&
 authOpera(record)
 "
 ><a @click="() => edit(record)">编辑</a></a-menu-item
 >
 <a-menu-item
 v-if="
 authButton.includes('user:del') && authOpera(record)
 "
 ><a @click="() => del(record.id)"
 >删除</a
 ></a-menu-item
 >

//处理数据权限-操作权限
    authOpera() {
      return function (record) {
        let bol = false;
        let authOrgIds = this.authOrganize.authOrgIds;
        let authParams = this.authOrganize.authParams;
        let user_id = this.authOrganize.user_id;
        var createParams = record.create_organize + ":Y";
        if (authOrgIds == "" || authOrgIds == undefined) {
          // console.log(user_id == record.create_user);
          if (user_id == record.create_user) {
            bol = true;
          }
        } else {
          // console.log(
          //   authParams.indexOf(createParams) > -1 ||
          //     user_id == record.create_user
          // );
          if (
            authParams.indexOf(createParams) > -1 ||
            user_id == record.create_user
          ) {
            bol = true;
          }
        }
        record.authOpera = bol;
        return bol;
      };
    },

指令权限控制实现

1、查询用户信息-查询用户享有的功能权限集合。
2、创建指令，在指令中对数据进行逻辑判断。
3、指令的引用和使用。
根据实际的效果，编写了两个指令：
1、action -控制功能权限
2、action-dauth -控制功能+数据权限（一般只有del和uedit使用。）
数据查询参考【上面的数据获取】

action指令的编写

import Vue from 'vue'
import store from '@/store'
/**
 * Action 权限指令
 * 指令用法：
 *  - 在需要控制 action 级别权限的组件上使用 v-action:[method] , 如下：
 *    <a-button v-action:add >添加用户</a-button>
 *    <a-button v-action:delete>删除用户</a-button>
 *    <a v-action:edit @click="edit(record)">修改</a>
 *
 *  - 当前用户没有权限时，组件上使用了该指令则会被隐藏
 *  - 当后台权限跟 提供的模式不同时，只需要针对这里的权限过滤进行修改即可
 */
const action = Vue.directive('action', {
  inserted: function (el, binding, vnode) {
    const actionName = binding.arg
    const roles = store.getters.roles
    const permissionButtonList = roles.permissionButtonList
    if(!permissionButtonList.includes(actionName)){
      el.parentNode && el.parentNode.removeChild(el) || (el.style.display = 'none')
    }
  },
})
export default action

action-dauth指令的编写

import Vue from 'vue'
import store from '@/store'
/**
 * Action 权限指令 - 数据权限
 * 指令用法：
 *  - 在需要控制 action 级别权限的组件上使用 v-action:[method] , 如下：
 *    <a-button v-action:add >添加用户</a-button>
 *    <a-button v-action:delete>删除用户</a-button>
 *    <a v-action:edit @click="edit(record)">修改</a>
 *
 *  - 当前用户没有权限时，组件上使用了该指令则会被隐藏
 *  - 当后台权限跟 提供的模式不同时，只需要针对这里的权限过滤进行修改即可
 */
const actionDauth = Vue.directive('action-dauth', {
  inserted: function (el, binding, vnode) {
    const roles = store.getters.roles
    const permissionButtonList = roles.permissionButtonList
    const authOrganize = roles.authOrganize;
    const record = binding.arg;
    const actionName = record.auth
    let authOrgIds = authOrganize.authOrgIds;
    let authParams = authOrganize.authParams;
    let user_id = authOrganize.user_id;
    var createParams = record.create_organize + ":Y";
    let bol = false;
    if(permissionButtonList.includes(actionName)){
      if (authOrgIds == "" || authOrgIds == undefined) {
        if (user_id == record.create_user) {
          bol = true;
        }
      } else {
        if (
          authParams.indexOf(createParams) > -1 ||
          user_id == record.create_user
        ) {
          bol = true;
        }
      }
    }
    if(!bol){
      el.parentNode && el.parentNode.removeChild(el) || (el.style.display = 'none')
    }
  },
})
export default actionDauth

指令的引用

需要在main.js中对指令进行引用，如下：

import action from '@/core/directives/action.js'
import actionDauth from '@/core/directives/action-dauth.js'
Vue.use(action)
Vue.use(actionDauth)

指令的使用

功能权限指令的使用： v-action:role:info （案例）
功能权限+数据权限指令的使用：v-action-dauth:[{…record,auth:role:edit}] （案例）

 <a-button
                size="small"
                v-action:role:info
                @click="() => info(record)"
                >详情</a-button
              >
              <a-button
                size="small"
                type="primary"
                v-action-dauth:[{...record,auth:`role:edit`}]
                @click="() => edit(record)"
                >编辑</a-button
              >
              <a-button
                size="small"
                type="danger"
                v-action-dauth:[{...record,auth:`role:del`}]
                @click="() => del(record.id)"
                >删除</a-button
              >
              <a-button
                size="small"
                type="primary"
                v-action:role:assignAuth
                @click="() => auth(record)"
                >分配权限</a-button
              >
              <a-button
                size="small"
                type="danger"
                v-action:role:status
                v-show="record.status == '0'"
                @click="() => updateStatus(record.id, '1')"
                >禁用</a-button
              >
              <a-button
                size="small"
                type="primary"
                v-action:role:status
                v-show="record.status == '1'"
                @click="() => updateStatus(record.id, '0')"
                >启用</a-button
              >