Vue element-admin权限控制之按钮使用
作者：青衣画白扇
这篇文章主要介绍了Vue element-admin权限控制之按钮使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
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 加注解的模式 这里就不多说了
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。