- 登錄：當(dāng)用戶填寫完賬號(hào)和密碼后向服務(wù)端驗(yàn)證是否正確反症，驗(yàn)證通過之后，服務(wù)端會(huì)返回一個(gè)token畔派，拿到token之后（我會(huì)將這個(gè)token存貯到sessionStorage中铅碍，保證刷新頁(yè)面后能記住用戶登錄狀態(tài)），前端會(huì)根據(jù)token再去拉取一個(gè) user_info 的接口來獲取用戶的詳細(xì)信息（如用戶權(quán)限线椰，用戶名等等信息）胞谈。
- 權(quán)限驗(yàn)證：通過token獲取用戶對(duì)應(yīng)的 role，自定義指令憨愉，獲取路由meta屬性里btnPermissions(注： meta.btnPermissions是存放按鈕權(quán)限的數(shù)組烦绳，在路由表里配置)，然后判斷role是否在btnPermissions數(shù)組里配紫，若不在即刪除該按鈕DOM爵嗅。
按鈕權(quán)限也可以用v-if判斷，但是如果頁(yè)面過多笨蚁，每個(gè)頁(yè)面頁(yè)面都要獲取用戶權(quán)限r(nóng)ole和路由表里的meta.btnPermissions,然后再做判斷睹晒，感覺有點(diǎn)麻煩，而自定義指令括细，只需在權(quán)限按鈕加入該指令即可伪很。
廢話不多說，上代碼...
路由配置：
path: '/permission',
component: Layout,
name: '權(quán)限測(cè)試',
meta: { btnPermissions: ['admin','supper','normal'] }, //頁(yè)面需要的權(quán)限
children: [
{
path: 'supper',
component: _import('system/supper'),
name: '權(quán)限測(cè)試頁(yè)',
meta: { btnPermissions: ['admin','supper'] } //頁(yè)面需要的權(quán)限
},
{
path: 'normal',
component: _import('system/normal'),
name: '權(quán)限測(cè)試頁(yè)',
meta: { btnPermissions: ['admin'] } //頁(yè)面需要的權(quán)限
}
]
復(fù)制代碼
自定義指令：
import Vue from 'vue'
/**權(quán)限指令**/
const has = Vue.directive('has', {
bind: function (el, binding, vnode) {
// 獲取頁(yè)面按鈕權(quán)限
let btnPermissionsArr = vnode.context.$route.meta.btnPermissions;
if (!Vue.prototype.$_has(btnPermissionsArr)) {
el.parentNode.removeChild(el);
}
}
});
// 權(quán)限檢查方法
Vue.prototype.$_has = function (value) {
let isExist = false;
// 獲取用戶按鈕權(quán)限
let btnPermissionsStr = sessionStorage.getItem("btnPermissions");
if (btnPermissionsStr == undefined || btnPermissionsStr == null) {
return false;
}
if (value.indexOf(btnPermissionsStr) > -1) {
isExist = true;
}
return isExist;
};
export {has}
復(fù)制代碼
然后在main.js文件引入文件
import has from './public/js/btnPermissions.js';
復(fù)制代碼
頁(yè)面中按鈕只需加v-has即可
<el-button @click='editClick' type="primary" v-has>編輯</el-button>
