>[success] # 簡單權限 [結合官方做法](https://router.vuejs.org/guide/advanced/meta.html) ~~~ 1.在做后臺管理系統的時候，一定會接觸到權限管理，對應的頁面會， 根據不同用戶的權限進行展示 2.簡單權限是根據'iview-admin' 中的方式進行配置，通過在前端路由 設置對應的配置項，根據后臺返回當前的用戶權限進行匹配，好處 簡單易用，不好點不適合多權限配置 3.理順一下這種方式的思路 首先需要在'路由全局守衛--beforeEach'這里配合'vuex 中action 去走用戶的接口'，這時候會拿到 一個用戶權限的返回值類似'['super_admin'] ['super_admin', 'admin']'這種形式，將這組權限和要 訪問的路徑做對比看用戶是否在當前權限中，來決定用戶是否能跳轉，因此這種方法會每次走鏈接 跳轉的時候都會觸發'路由的聲明周期'來做判斷 '關于菜單渲染' 在走'路由的聲明周期的時候'我們會將權限存在'vuxe' 中，當菜單渲染時候，一般會在 'vuex' 中定義一個獲取菜單的方法，這個方法主要會將'routers 路由文件'和'權限'進行匹配生成菜單， 也可以理解成每次輸入地址后都會生成新的菜單數據 4.下面的'routes' 是將路由抽離的文件可以參看 登陸寫法 ~~~ >[danger] ##### 在路由配置 ~~~ { path: '/components', name: 'components', meta: { icon: 'logo-buffer', title: '組件', access:['super_admin'] }, } ~~~ >[danger] ##### iview-admin -- 源碼中路由配置 [源碼地址]([https://github.com/iview/iview-admin/blob/master/src/router/index.js](https://github.com/iview/iview-admin/blob/master/src/router/index.js)) ~~~ const router = new Router({ routes, mode: 'history' }) const LOGIN_PAGE_NAME = 'login' // 用來判斷當前用戶是否有訪問菜單的權限 // canTurnTo 返回的是布爾類型，主要用來做看當前用戶權限訪問的地址和菜單中 // 對應地址的權限是否相同 const turnTo = (to, access, next) => { if (canTurnTo(to.name, access, routes)) next() // 有權限，可訪問 else next({ replace: true, name: 'error_401' }) // 無權限，重定向到401頁面 } router.beforeEach((to, from, next) => { iView.LoadingBar.start() const token = getToken() if (!token && to.name !== LOGIN_PAGE_NAME) { // 未登錄且要跳轉的頁面不是登錄頁 next({ name: LOGIN_PAGE_NAME // 跳轉到登錄頁 }) } else if (!token && to.name === LOGIN_PAGE_NAME) { // 未登陸且要跳轉的頁面是登錄頁 next() // 跳轉 } else if (token && to.name === LOGIN_PAGE_NAME) { // 已登錄且要跳轉的頁面是登錄頁 next({ name: homeName // 跳轉到homeName頁 }) } else { if (store.state.user.hasGetInfo) { turnTo(to, store.state.user.access, next) } else { store.dispatch('getUserInfo').then(user => { // 拉取用戶信息，通過用戶權限和跳轉的頁面的name來判斷是否有權限訪問;access必須是一個數組，如：['super_admin'] ['super_admin', 'admin'] turnTo(to, user.access, next) }).catch(() => { setToken('') next({ name: 'login' }) }) } } }) router.afterEach(to => { setTitle(to, router.app) iView.LoadingBar.finish() window.scrollTo(0, 0) }) ~~~ >[danger] ##### 核心判斷 -- canTurnTo ~~~ 1.canTurnTo 有三個參數'name 即將跳轉的路由nam','access 用戶權限數組','routes 路由列表' 2.返回的是布爾類型 ~~~ * 利用遞歸去查找所有路由，因為路由有嵌套的children 類型所以遞歸 ~~~ /** * 權鑒 * @param {*} name 即將跳轉的路由name * @param {*} access 用戶權限數組 * @param {*} routes 路由列表 * @description 用戶是否可跳轉到該頁 */ export const canTurnTo = (name, access, routes) => { const routePermissionJudge = (list) => { return list.some(item => { if (item.children && item.children.length) { return routePermissionJudge(item.children) } else if (item.name === name) { return hasAccess(access, item) } }) } return routePermissionJudge(routes) } ~~~ * hasAccess 查router 中是否配置'access' 如果配置了，看配置的權限是否在后臺返回數組中 ~~~ /** * @param {*} access 用戶權限數組，如 ['super_admin', 'admin'] * @param {*} route 路由列表 */ const hasAccess = (access, route) => { if (route.meta && route.meta.access) return hasOneOf(access, route.meta.access) else return true } ~~~ * hasOneOf 查詢目標數組單項是否在當前數組中 ~~~ /** * @param {Array} target 目標數組 * @param {Array} arr 需要查詢的數組 * @description 判斷要查詢的數組是否至少有一個元素包含在目標數組中 */ export const hasOneOf = (targetarr, arr) => { return targetarr.some(_ => arr.indexOf(_) > -1) } ~~~