Vue项目 巧用指令从而控制权限

我们都知道每个项目中，权限控制是必不可少的，合理的管控权限，从而达到权限的合理分发！

第一步: 获取权限集 【自行根据项目获取】

第二步: 通过权限集匹配是否符合权限

修改directices.js新增如下：
import permission from './module/permission'
const directives = {
  draggable,
  clipboard,
  permission
}
directices目录下permission.js
import store from '@/store'
// 是否有权限
const hasPermission = userPermission => {
  let userPermissionList = Array.isArray(userPermission) ? userPermission : [userPermission]
  // 当前用户的权限列表
  let permissionList = store.state.user && store.state.user.authCodes
  console.log(JSON.stringify(permissionList))
  return userPermissionList.some(e => permissionList.includes(e))
}
export default {
  inserted: (el, binding) => {
    if (!hasPermission(binding.value)) {
      el.parentNode.removeChild(el)
      console.log(JSON.stringify(binding.value))
    }
  }
}

第三步：使用指令

<Col span="6" v-permission="['add_sys']">
                <router-link
                  :to="{name:'system_manage_add'}"
                ><Button type="dashed" long style="height: 198px;"><Icon type="md-add" style="position: relative;top: -2px;" class="mr-5" size="16"></Icon> <span style="font-size: 14px;">新增系统</span></Button>
                </router-link>
              </Col>

若只是需要禁用、或者涉及到样式、隐藏等控制，不需要删除DOM的话，可通过以下方式

1、utils目录下新增permission.js文件，内容如下：
/**
 *   @description 按扭级权限校验
 *   @author Wanghui
 *   @date 2021-01-16
 */
import store from '@/store'
// 权限校验
/**
 * @param {Array} authCodes 权限id
 * @returns {Boolean}
 * @example v-if="checkPermission([1])"
 */
export default function checkPermission (authCodes) {
  if (authCodes && authCodes instanceof Array && authCodes.length > 0) {
    const permissionList = store.state.user && store.state.user.authCodes
    let flag = false
    authCodes.map(r => {
      flag = permissionList.includes(r)
    })
    console.log(flag)
    return flag
  } else {
    // 如果是挂在到vue全局使用  v-if="$checkPermission([1])"
    console.error(`需要按照这个格式来设置 v-if="checkPermission([1])"`)
    return false
  }
}

2、main.js导入checkPermission方法
// 按钮组件级别权限校验
import checkPermission from "./utils/permission";
Vue.prototype.$checkPermission = checkPermission

3、使用发放
<router-link :disabled="!$checkPermission([`add_menu`])"
    :to="{name:'add_menu'}"
  ><Icons
    type="bianji"
    :size="16"
  ></Icons></router-link
  >
</Tooltip>