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><Icon type="md-add" class="mr-5" size="16"></Icon> <span>新增系统</span></Button>
</router-link>
</Col>

若只是需要禁用、或json者涉及到样式、隐藏等控制,不需要删除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>