Vue element-admin权限控制 之 按钮

在项目中一般的权限控制都是精确到按钮的分配，那么在 elemen-admin中如何实现这一操作呢

第一步 需要创建 hasPermi.js 当然名称可以自定义这个js文件是做权限的匹配的

 /**
 * v-hasPermi 操作权限处理
 */

import store from '@/store'

 function checkPermission(el, binding) {
   const { value } = binding
   //通用权限测试用的偷懒的写法
   const all_permission = "*:*:*"; //此处定义的是权限的 格式：'system:sysUser:edit'
   const roles = store.getters && store.getters.permissions
   if (value && value instanceof Array) {
     if (value.length > 0) {
       const permissionRoles = value
       const hasPermission = roles.some(role => {
       	//这里如果是包含 或者 是上面的通配符号就放行显示（当然 生产环境是不能加这个通配符的）
         return all_permission === role || permissionRoles.includes(role)
       })

       if (!hasPermission) {
         el.parentNode && el.parentNode.removeChild(el)
       }
     }
   } else {
     throw new Error(`need roles! Like v-permission="['admin','editor']"`)
   }
 }

 export default {
 	//被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
   inserted(el, binding) {
     checkPermission(el, binding)
   },
   // 被绑定元素所在的模板更新时调用，而不论绑定值是否变化
   update(el, binding) {
     checkPermission(el, binding)
   }
 }

第二步 在创建一个index.js 来在Vue 中全局使用

import permission from './hasPermi'
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

最后看看页面怎么使用 没错 优雅的使用 v-permission

<template slot-scope="scope">
          <el-button type="text" size="small"
                     icon="el-icon-edit"
                     v-permission="['system:sysUser:edit']"
                     @click="updateInfo(scope.row)">修改</el-button>
</template>

效果 ： 当用户权限不包含 system:sysUser:edit时 修改按钮隐藏

包含时就会显示出来

注：最好后端的接口请求上面加上权限再一次校验，防止后端已经更新用户权限，前端没有刷新导致没有生效。可以靠率 aop 加注解的模式 这里就不多说了