基於Vue自訂指令實現按鈕級權限控制的方法

這篇文章主要介紹了基於vue自訂指令實現按鈕級權限控制,本文給大家介紹的非常詳細，有興趣的朋友一起學習吧

思路：

• 登入：當使用者填寫完帳號和密碼後向服務端驗證是否正確，驗證通過之後，服務端會回傳一個token，拿到token之後（我會將這個token存貯到sessionStorage中，保證刷新頁面後能記住使用者登入狀態），前端會根據token再去拉取一個user_info 的介面來取得使用者的詳細資料（如使用者權限，使用者名稱等等資訊).
  

• 權限驗證：透過token取得使用者對應的role，自訂指令，取得路由meta屬性裡btnPermissions( 註： meta.btnPermissions是存放按鈕權限的數組，在路由表裡配置)，然後判斷role是否在btnPermissions數組裡，若不在即刪除該按鈕DOM。
  

按鈕權限也可以用v-if判斷，但是如果頁面過多，每個頁面頁面都要取得使用者權限role和路由表裡的meta .btnPermissions,然後再做判斷，感覺有點麻煩，而自訂指令，只需在權限按鈕加入該指令即可。

廢話不多說，上程式碼...

路由設定：

##

path: '/permission',
  component: Layout,
  name: '权限测试',
  meta: { btnPermissions: ['admin','supper','normal'] }, //页面需要的权限
  children: [
   {
    path: 'supper',
    component: _import('system/supper'),
    name: '权限测试页',
    meta: { btnPermissions: ['admin','supper'] } //页面需要的权限
   },
   {
    path: 'normal',
    component: _import('system/normal'),
    name: '权限测试页',
    meta: { btnPermissions: ['admin'] } //页面需要的权限
   }
  ]

自訂指令：

#

import Vue from 'vue'
/**权限指令**/
const has = Vue.directive('has', {
 bind: function (el, binding, vnode) {
  // 获取按钮权限
  let btnPermissions = vnode.context.$route.meta.btnPermissions.split(",");
  if (!Vue.prototype.$_has(btnPermissions)) {
   el.parentNode.removeChild(el);
  }
 }
});
// 权限检查方法
Vue.prototype.$_has = function (value) {
 let isExist = false;
 let btnPermissionsStr = sessionStorage.getItem("btnPermissions");
 if (btnPermissionsStr == undefined || btnPermissionsStr == null) {
  return false;
 }
 if (value.indexOf(btnPermissionsStr) > -1) {
  isExist = true;
 }
 return isExist;
};
export {has}

然後在main .js檔案引入檔案

import has from './public/js/btnPermissions.js';

#頁面中按鈕只需加v-has即可

#

<el-button @click=&#39;editClick&#39; type="primary" v-has>编辑</el-button>

結語：

權限這種事需要前後端結合，前端盡可能的去控制，記住：永遠不相信使用者輸入！

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

Vue使用Redux的方法

Vue mui實作圖片的本機快取

vue路由攔截及頁面跳轉設定的方法介紹

以上是基於Vue自訂指令實現按鈕級權限控制的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！