系统开发中按钮级权限控制也是非常重要的功能之一，可以严格控制不同角色用户所拥有的功能权限。
自定义v-permission指令
首先可以通过vue的自定义指令来控制按钮（div，link也阔以）等的显示与否以及是否禁用状态。具体可查看官方文档vue自定义指令。
/** * 定义vue permission指令 * * el：指令所绑定的元素，可以用来直接操作 DOM * binding：一个对象，包含以下属性： * name：指令名，不包括 v- 前缀。 * value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。 * oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子 * 中可用。无论值是否改变都可用。 * expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。 */ Vue.directive('permission', function (el, binding) { // 检查是否有该code代表的权限or该code是否为禁用状态，并将对应的dom进行相应的控制（没有则隐藏，禁用则置灰不可点击） // 前端可在登录后将拥有的菜单以及权限的树结构存于sessionStorage，也可每次进入页面后单独请求api判断是否存在等。 Permission.checkCodeAndSetDom(binding.value, el); }) 在功能模块定义各自的permission.js文件用于设置需要控制的权限的code，uri，请求方法等。
const code = {
// 菜单列表页面相关 menu: { // 保存资源权限 save: Permission.code("resource:save").uri("/sys/resources").method(method.POST), } } export default code; 在vue页面中对需要控制的按钮等使用v-permission指令，并可对权限相关联的uri进行请求，并返回结果
// 对要限制的按钮进行控制 <el-button v-permission="permission.save.code" type="primary" icon="el-icon-plus" @click="addResource(false)">添加</el-button> // 以下是script区 // 导入permission.js文件 import permissions from '../permissions.js' export default { data() { // 设置save权限 savePermission: permissions.menu.save }, methods: { // 在method中定义的按钮click事件方法 async addResource() { // 该方法会用在permission.js文件中指定该权限的请求uri和请发方法发送请求，并获取响应结果 let res = await this.savePermission.requset(this.form); .... } } }广州设计公司https://www.houdianzi.com 我的007办公资源网站https://www.wode007.com
Permission.js文件之Permission类
以下为上述功能所需要依赖的Permission类
import request from './request' import Config from './config' /** * show: 菜单按钮是否显示 * disabled: 菜单功能是否被禁用 */ class PermissionInfo { constructor(show, disabled) { this.show = show; this.disabled = disabled; } } /** * 可用于各模块定义各自权限对象 */ class Permission { constructor(code) { this.code = code; } /** * 权限对应的uri * @param {String} uri 请求uri */ uri(uri) { this.uri = uri; return this; } /** * uri的请求方法(方法枚举) * @param {Number} method 请求方法 */ method(method) { this.method = method; return this; } /** * 获取权限的完整url */ getUrl() { return request.getApiUrl(this.uri); } /** * 操作该权限，即请求对应的uri * @param {Object} param 请求该权限的参数 */ request(param) { return request.send(this, param); } /** 静态方法 **/ /** * 静态工厂，设置code，并返回Permission对象 * @param {String} code 权限code（权限标识符）Permission对象必有的属性 */ static code(code) { return new Permission(code); } /** * 登录成功保存对应的token以及菜单按钮列表 */ static savePermission(tokenMenuAndPermission) { //保存token Permission.saveToken(tokenMenuAndPermission.token); //保存menus sessionStorage.setItem(Config.name.resourcesKey, JSON.stringify(tokenMenuAndPermission.resources)); } /** * 获取token */ static getToken() { return sessionStorage.getItem(Config.name.tokenKey); } /** * 保存token * @param {Object} token token */ static saveToken(token) { sessionStorage.setItem(Config.name.tokenKey, token); } /** * 从sessionStorage所有permissions获取指定permission对象的PermissionInfo */ static getPermission(code) { // 超级管理员通行 // if (JSON.parse(sessionStorage.getItem(Config.name.adminKey)).username == 'admin') { // return new PermissionInfo(true, false); // } let menus = JSON.parse(sessionStorage.getItem(Config.name.resourcesKey)); for (let menu of menus) { let leafs = Permission.getLeafs(menu); // 获取菜单的所有叶子节点 for (let p of leafs) { // 如果是菜单类型，则跳过 if (p.type === 1) { continue; } if (p.code === code) { // 如果是禁用状态，则禁止按钮点击 if (p.status === 0) { return new PermissionInfo(true, true); } return new PermissionInfo(true, false); } } } return new PermissionInfo(false, true); } /** * 获取菜单的所有叶子节点 * @param {Object} menu 根菜单 */ static getLeafs(menu) { let leafs = []; Permission.fillLeafs(menu, leafs); return leafs; } /** * 将所有叶子节点填充 * @param {Object} meun 根菜单 * @param {Object} leafs 需要填充的叶子节点 */ static fillLeafs(menu, leafs) { let children = menu.children; if (!children) { leafs.push(menu); return; } children.forEach(m => { Permission.fillLeafs(m, leafs); }) } /** * 检查权限code并设定对应dom的属性 * @param code 权限码 * @param elDom dom元素 */ static checkCodeAndSetDom(code, elDom) { // 根据权限code获取对应权限信息 let permission = Permission.getPermission(code); // 如果没有显示权限，则隐藏该元素 if (!permission.show) { elDom.style.display = 'none'; } // 如果该权限被暂用，则禁止该btn if (permission.disabled) { // 将按钮置为禁用 elDom.setAttribute('disabled', 'disabled'); // element-ui需要添加该类样式 elDom.className = elDom.className + ' ' + 'is-disabled'; } } } export default Permission 到此为止前端的按钮，link, div等的权限控制就差不多了。再提一点的就是权限code就是与指定资源操作相关联的一个标识符。