系統開發中按鈕級權限控制也是非常重要的功能之一，可以嚴格控制不同角色用戶所擁有的功能權限。
自定義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就是與指定資源操作相關聯的一個標識符。