一、什么是權限管理
權限管理是指一個角色（如vip和非vip）在一個系統中只能使用指定的功能并且只能訪問指定的界面，權限管理是一個專案當中必不可少的部分，
二、如何做到權限管理功能
注意: 新版 Vue Router 中用
router.addRoute來替代原有的router.addRoutes來動態添加路由、子路由，
路由分為兩塊：
- 不需要權限訪問的路由，比如登錄頁面、404頁面，有時首頁也不需要，
- 需要權限訪問的路由
用戶登錄后后端會回傳一個當前用戶的權限標識，前端通過給定的權限標識篩選出用戶能夠訪問的有權限的路由，先把篩選出來的有權限的路由通過 addRoutes 添加到實體上，目的是為了可以通過地址欄訪問，然后把篩選出來有權限的動態路由存盤到 vuex 中，目的是為了能夠在選單欄中體現，
注意：這里的 addRoutes 有一定的缺陷，它在導航守衛進行完一次后才會添加新配置的路由，所以需要讓它再走一次導航守衛才能夠使用，
三、權限管理整體流程
1.api介面
主要后端負責，前端負責請求回應攔截統一處理
2.路由
- 靜態路由：不需要訪問權限的路由
- 動態路由：需要權限訪問的路由
- 默認只有靜態路由
- 用戶登陸后獲取用戶資訊，匹配該用戶有權訪問的動態路由
- 將以用戶資訊匹配到的動態路由利用 addRoutes 添加到路由上
注意：
1.addRoutes 有一定的缺陷，它剛添加的路由必須再經過一次導航守衛才能觸發，導航守衛經過第一次是不會觸發的，解決方法是在路由守衛上再通過 next(to.fullPath) 再經過一次
2.剛添加的404頁面不能立馬使用，如果靜態路由中包含用 * 匹配的404，那么會直接跳轉到404，解決方法是將靜態路由的404洗掉，通過 addRoutes 在最后添加404
- 選單欄問題:
早期我們使用 this.$router.options.routes 來進行選單欄的渲染，但是該值并不是回應式的，所以選單并不會通過動態路由發生更新，這時，我們可以通過 vuex 的存盤路由配置資料，因為其就是實作資料和視圖的同步雙向系結的，和路由配置保持一致， - 退出后上一個賬號留存下來 addRoutes 添加的路由還能使用
退出時重置路由即可
// 路由實體化 const createRouter = () => new Router({ // mode: 'history', // require service support scrollBehavior: () => ({ y: 0 }), // 這里放的是靜態路由 routes: constantRoutes }) const router = createRouter() // Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465 // 重置路由 只需要在退出登陸時呼叫即可 export function resetRouter() { const newRouter = createRouter() router.matcher = newRouter.matcher // reset router }
3.按鈕管理
有些按鈕也是需要權限來判斷是否顯示，這時就可以通過自定義指令來解決，
自定義指令
- 定義一個全域自定義指令
新建一個directives檔案夾，通過 export defaults {} 暴露物件，然后開始定義指令
export default { 自定義指令名: { // 渲染后鉤子函式 inserted(dom, obj) {}, // 更新后鉤子函式 componentUpdated(dom, obj) {}, // 解綁后鉤子函式 unbind(dom) {} } } - 匯入全域自定義指令
/* 匯入全域自定義指定 Vue.directive(指令名,{生命周期}) */ import directivesJs from '@/directives' - 掛載自定義指令
/* 這里通過 Object.key() 方法獲取所有自定義指令名，以便自動注冊 */ Object.keys(directivesJs).forEach((item) => { Vue.directive(item, directivesJs[item]) }) - 使用
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/377104.html
標籤：其他
下一篇：[移動端]視口與媒體查詢