Vue自定义指令之按钮级别权限的管理

在Vue的权限功能开发过程中通常有页面级别和按钮级别的权限控制,页面级别的权限相对好处理一下，一般情况是后端根据登录的用户账号只下发用户有权限的页面菜单，前端动态渲染页面跳转的菜单即可。

相比较而言更细颗粒度的按钮级别的权限控制相对麻烦点，这里我想讲两种Vue按钮基本控制的级别思路。

方法一：封装权限指令控制按钮

第一步：

登录的时候让后端返回当前账号的角色，即 role，存入Vue中；

第二步：

封装vue自定义指令，来判断用户权限，具体思路是从Vuex取出登录后后端角色信息和指令中用户传入的角色信息进步比对，如果存在即有权限，如果不存在则无权限。

src/directive/permission/permission.js

javascript 复制代码

import store from '@/store'

function checkPermission(el, binding) {
  const { value } = binding
  const roles = store.getters && store.getters.roles
  // 判断角色信息是否存在并且是数组
  if (value && value instanceof Array) {
    // 当角色存在时
    if (value.length > 0) {
      const permissionRoles = value
      /**
       * 判断vuex中获取的角色信息是否符合
       * some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。
       * some() 方法会依次执行数组的每个元素：
       * 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
       * 如果没有满足条件的元素，则返回false。
       * 注意： some() 不会对空数组进行检测。
       * 注意： some() 不会改变原始数组。
       */
      const hasPermission = roles.some(role => {
        return permissionRoles.includes(role)
      })
      /**
       * 如果不符合则取出这个dom
       */
      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    }
  } else {
    throw new Error(`need roles! Like v-permission="['admin','editor']"`)
  }
}
export default {
  inserted(el, binding) {
    checkPermission(el, binding)
  },
  update(el, binding) {
    checkPermission(el, binding)
  }
}

src/directive/permission/index.js

javascript 复制代码

import permission from './permission'

const install = function(Vue) {
  Vue.directive('permission', permission)
}

if (window.Vue) {
  window['permission'] = permission
  Vue.use(install); // eslint-disable-line
}

permission.install = install
export default permission

mian.js中全局注册

javascript 复制代码

import permission from './directive/permission'
Vue.use(permission)

vue页面v-permission指令的使用

html 复制代码

    <div :key="key" style="margin-top:30px;">
      <div>
        <!-- 只有 admin 角色可以看见 -->
        <span v-permission="['admin']" class="permission-alert">
          Only
          <el-tag class="permission-tag" size="small">admin</el-tag> can see this
        </span>
        <el-tag v-permission="['admin']" class="permission-sourceCode" type="info">
          v-permission="['admin']"
        </el-tag>
      </div>

      <div>
        <!-- 只有 editor 用户可以看见 -->
        <span v-permission="['editor']" class="permission-alert">
          Only
          <el-tag class="permission-tag" size="small">editor</el-tag> can see this
        </span>
        <el-tag v-permission="['editor']" class="permission-sourceCode" type="info">
          v-permission="['editor']"
        </el-tag>
      </div>

      <div>
        <!-- admin 和 editor两个角色都可以看见 -->
        <span v-permission="['admin','editor']" class="permission-alert">
          Both
          <el-tag class="permission-tag" size="small">admin</el-tag> and
          <el-tag class="permission-tag" size="small">editor</el-tag> can see this
        </span>
        <el-tag v-permission="['admin','editor']" class="permission-sourceCode" type="info">
          v-permission="['admin','editor']"
        </el-tag>
      </div>
    </div>

方法二：使用全局权限判断函数

封装权限判断函数 src/utils/permission.js

javascript 复制代码

import store from '@/store'

/**
 * @param {Array} value
 * @returns {Boolean}
 * @example see @/views/permission/directive.vue
 */
export default function checkPermission(value) {
  if (value && value instanceof Array && value.length > 0) {
    const roles = store.getters && store.getters.roles
    const permissionRoles = value

    const hasPermission = roles.some(role => {
      return permissionRoles.includes(role)
    })
    return hasPermission
  } else {
    console.error(`need roles! Like v-permission="['admin','editor']"`)
    return false
  }
}

在mian.js中引入

javascript 复制代码

import { checkPermission } from "@/api/system/dict/data";
// 全局方法挂载
Vue.prototype.checkPermission = checkPermission

在页面中使用

javascript 复制代码

    <div :key="'checkPermission'+key" style="margin-top:60px;">
      <!-- 只有角色为 admin 时显示 -->
      <el-tabs type="border-card" style="width:550px;">
        <el-tab-pane v-if="checkPermission(['admin'])" label="Admin">
          Admin can see this
          <el-tag class="permission-sourceCode" type="info">
            v-if="checkPermission(['admin'])"
          </el-tag>
        </el-tab-pane>
        <!-- 只有角色为 editor 时显示 -->
        <el-tab-pane v-if="checkPermission(['editor'])" label="Editor">
          Editor can see this
          <el-tag class="permission-sourceCode" type="info">
            v-if="checkPermission(['editor'])"
          </el-tag>
        </el-tab-pane>
        <!-- 当角色为 admin 或 editor 时显示 -->
        <el-tab-pane v-if="checkPermission(['admin','editor'])" label="Admin-OR-Editor">
          Both admin or editor can see this
          <el-tag class="permission-sourceCode" type="info">
            v-if="checkPermission(['admin','editor'])"
          </el-tag>
        </el-tab-pane>
      </el-tabs>
    </div>

【警告】在某些情况下，使用v-permission将无效。例如：元素UI的选项卡组件或el表格列以及其他动态渲染dom的场景。您只能使用v-if来执行此操作。

参考文献：