快捷導航

vue實現(xiàn)前端按鈕組件權(quán)限管理

更新時間：2022年09月16日 08:35:16 作者：_Congratulate

這篇文章主要為大家介紹了vue實現(xiàn)前端按鈕組件權(quán)限管理，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

方案1：數(shù)組+自定義指令

把權(quán)限放到數(shù)組中，通過vue的自定義指令來判斷是否擁有該權(quán)限，有則顯示，反之則不顯示

我們可以把這個按鈕需要的權(quán)限放到組件上

<el-button
  v-hasPermi="['home:advertising:update']"
>新建</el-button>

自定義指令：

邏輯就是我們在登陸后會獲取該用戶的權(quán)限，并存儲到localStorage中，當一個按鈕展示時會判斷l(xiāng)ocalStorage存儲的權(quán)限列表中是否存在該按鈕所需的權(quán)限。

/**
 * 權(quán)限處理
 */
?
export default {
  inserted(el, binding, vnode) {
    const { value } = binding;
    const SuperPermission = "superAdmin"; // 超級用戶，用于開發(fā)和測試
    const permissions = localStorage.getItem('userPermissions')&& localStorage.getItem('userPermissions').split(',');
    // 判斷傳入的組件權(quán)限是否符合要求
    if (value && value instanceof Array && value.length > 0) {
      const permissionFlag = value;
      const hasPermissions = permissions && permissions.some(permission => all_permission === permission || permissionFlag.includes(permission));
      // 判斷是否有權(quán)限是否要展示
      if (!hasPermissions) {
        el.parentNode && el.parentNode.removeChild(el);
      }
    } else {
      throw new Error(`請設(shè)置操作權(quán)限標簽值`);
    }
  },
};

注冊權(quán)限

import Vue from 'vue';
import Vpermission from "./permission";
// 按鈕權(quán)限 自定義指令
Vue.directive('permission', Vpermission);

關(guān)于路由權(quán)限

數(shù)組的方案也可以用到菜單權(quán)限上，可以在路由的meta中攜帶該路由所需的權(quán)限，例如:

const router = [{
  path: 'needPermissionPage',
  name: 'NeedPermissionPage',
  meta: {
    role: ['permissionA', 'permissionB'],
  },
}]

這個時候就需要在渲染權(quán)限的時候動態(tài)渲染了，該方案可以看一下其他的文章或成熟的項目，寫的非常好

方案2：二進制

通過二進制來控制權(quán)限：

假設(shè)我們有增刪改查四個基本權(quán)限：

const UPDATE = 0b000001;
const DELETE = 0b000010;
const ADD = 0b000100;
const SEARCH = 0b001000;

每一位代表是否有該權(quán)限，有該權(quán)限則是1，反之是0

表達權(quán)限：

我們可以使用或運算來表達一個權(quán)限結(jié)果，或運算：兩個任何一個為1，結(jié)果就為1

const reslut = UPDATE | DELETE | SEARCH;
console.log(reslut);  // 11

變成了十進制，我們可以通過toString方法變?yōu)槎M制結(jié)果

const reslut = UPDATE | DELETE | SEARCH;
console.log(reslut.toString(2));  // 1011

result 這個結(jié)果就代表我們既擁有更新權(quán)限，同時也擁有刪除和查詢的權(quán)限

那么我們可以將十進制的reslut當作該用戶的權(quán)限，把這個結(jié)果給后臺，下次用戶登陸后只需要返回這個結(jié)果就可以了。

權(quán)限判斷

我們了解了如何表達一個權(quán)限，那如何做權(quán)限的判斷呢？

可以通過且運算，且運算：兩位都為1，這一位的結(jié)果才是1。

還是用上面的結(jié)果，當我們從接口中拿到了reslut，判斷他是否有 DELETE 權(quán)限：

console.log((reslut & DELETE) === DELETE);  // true

是否有新增的權(quán)限

console.log((result & ADD) === ADD); // false

判斷和使用

/**
 * 接受該組件所需的權(quán)限，返回用戶權(quán)限列表是否有該權(quán)限
 * @param {String} permission 
 * @returns {Boolean}
 */
function hasPermission(permission) {
  const permissionList = {
    UPDATE: 0b000001,
    DELETE: 0b000010,
    CREATE: 0b000100,
    SEARCH: 0b001000
  }
  let btnPermission = permissionList[permission] ? permissionList[permission] : -1;
  if (btnPermission === -1) return false;
  const userPermission = localStorage.getItem('userPermissions');
  // 將本地十進制的值轉(zhuǎn)換為二進制
  const userPermissionBinary = userPermission.toString(2);
  // 對比組件所需權(quán)限和本地存儲的權(quán)限
  return (userPermissionBinary & btnPermission) === btnPermission;
}

直接在組件中通過v-show/v-if來控制是否展示

<el-button v-show="hasPermission('UPDATE')">更新</el-button>

小結(jié)

我理解來說，對于方案1來說，方案2的優(yōu)勢在于更簡潔，后臺僅需要存儲一個十進制的值，但如果后期新增需求更新了新的權(quán)限，可能需要調(diào)整二進制的位數(shù)來滿足業(yè)務(wù)需求。方案1的優(yōu)勢在于更加易懂，新增權(quán)限時僅需要更新組件自定義指令的數(shù)組。

以上就是vue實現(xiàn)前端按鈕組件權(quán)限管理的詳細內(nèi)容，更多關(guān)于vue 前端按鈕組件權(quán)限的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: