說在前面
權限控制一直是一個很煩人的事情，無論是前端還是後臺。
在平常的項目裏，可能大家都是通過後臺傳來的字段來控制元素的display屬性。
其實這麼做是很不嚴謹的。
因爲可以通過F12查看元素，也可以進行更改，這個時候如果把display改爲block，就可以操作它了，那你的權限控制就白做了。
vue項目如何做權限控制
我看到比較多的是這樣的做法，根據後臺傳的字段，通過v-if，v-else來控制，這樣是不會有dom產生了，不用擔心別人惡意篡改。但是你在view層裏寫一些這樣的是不是很不優雅？而且相當麻煩。
優雅的做法（大廠做法）Vue.directive
都9012年了，我們知道vue有個自定義指令，那我們可以用它來做控制。
1.新建一個文件array.js。用於存放後臺傳過來的所有權限
//檢查該用戶是否有此權限
export function checkArray(key){
//模擬權限數組(實際項目是後臺傳過來的)
let arr = [‘1’,‘2’,‘3’,‘4’];
let index = arr.indexOf(key);
if(index > -1){
return true;
}else{
return false;
}
}
2.我們這裏做的是全局權限控制 所以找到main.js
//引入寫好的檢查權限的方法
import {checkArray} from “./common/array”
//添加全局自定義指令
Vue.directive(‘display-key’, {
inserted (el, binding) {
//獲取到v-display-key的值
let displayKey = binding.value
if (displayKey) {
//判斷用戶是否存在該權限
let hasPermission = checkArray(displayKey)
// console.log(hasPermission);
//如果用戶沒有該權限，則刪除對應的dom節點
if (!hasPermission) {
// console.log(el.parentNode);
el.parentNode && el.parentNode.removeChild(el)
}
} else {
//v-display-key值爲空，拋出異常
throw new Error(need key! Like v-display-key="'displayKey'")
}
}
})
3.組件使用 v-display-key
由於我們是全局定義的，所以組件裏無需單獨引入。
直接在組件某個標籤里加這個指令 傳入相對應的值，就會自動進行判斷
如果用戶沒有此權限，則不會渲染這個dom，很安全，很便捷。一次寫入，隨處可用
//我們定義的 arr = [‘1’,‘2’,‘3’,‘4’]; 所以下面兩個按鈕，a權限是不會渲染的，b權限是用戶擁有的權限，可以正常使用。
a權限
b權限
總結
1.此種方法可以精確到組件裏的任何一個標籤，按鈕級，輸入框級都不在話下。
2.沒有權限，就不會渲染dom，安全級別高
改進方案
寫在main.js裏面還是不夠優雅，我們可以把它獨立出來，main.js裏面引入