路由權限可參考這位大神寫的，很全面==>手摸手，帶你用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 btnPermissionsArr = []; if(binding.value){ // 如果指令傳值，獲取指令參數，根據指令參數和當前登錄人按鈕權限做比較。 btnPermissionsArr = Array.of(binding.value); }else{ // 否則獲取路由中的參數，根據路由的btnPermissionsArr和當前登錄人按鈕權限做比較。 btnPermissionsArr = vnode.context.$route.meta.btnPermissions; } if (!Vue.prototype.$_has(btnPermissionsArr)) { 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='editClick' type="primary" v-has>編輯</el-button> 復制代碼結語：
權限這種事情需要前后端結合，前端盡可能的去控制，更多的需要后台判斷。記住：永遠不相信用戶輸入！
以上有不足的地方
作者：Coder_lixc
鏈接：https://juejin.im/post/5b03d7756fb9a07aa0485856
來源：掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。