在Vue的权限功能开发过程中通常有页面级别和按钮级别的权限控制,页面级别的权限相对好处理一下，一般情况是后端根据登录的用户账号只下发用户有权限的页面菜单，前端动态渲染页面跳转的菜单即可。
相比较而言更细颗粒度的按钮级别的权限控制相对麻烦点，这里我想讲两种Vue按钮基本控制的级别思路。
方法一：封装权限指令控制按钮
第一步：
登录的时候让后端返回当前账号的角色，即 role，存入Vue中；
第二步：
封装vue自定义指令，来判断用户权限，具体思路是 从Vuex取出登录后后端角色信息和指令中用户传入的角色信息进步比对，如果存在即有权限，如果不存在则无权限。
src/directive/permission/permission.js
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
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中全局注册
import permission from './directive/permission'
Vue.use(permission)
vue页面v-permission指令的使用
<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
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中引入
import { checkPermission } from "@/api/system/dict/data";
// 全局方法挂载
Vue.prototype.checkPermission = checkPermission
在页面中使用
<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来执行此操作。
参考文献：
