[TOC] ### 實現思路： ~~~ 通過路由攔截，加載權限信息判斷是否有權限加載，有權限的情況下動態加載路由。 ~~~ ### 1. 創建permission文件（與main文件同級，并在main中引用） ~~~ 作用： 路由攔截，連接文件 ~~~ ~~~ router.beforeEach(async (to, from, next) => { // TODO添加session if (isPermission()) { // 是否開啟運維 const hasSession = getSession(); if (hasSession) { // 是否登錄過 if (String(to.path).toLowerCase() === "/login") { next({ path: "/" }); } else { if (hasPermissionInfo() && hasUserInfo()) { // 有權限信息進行正常路由跳轉 next(); } else { try { await store.dispatch("getUserInfo"); // 無權限信息先獲取權限信息 const permission = await store.dispatch("userGetPermission"); if ( permission && Array.isArray(permission) && permission.length > 0 && hasUserInfo() ) { // 如果權限信息獲取成功，動態添加路由并繼續原來的路由跳轉 const accessRoutes = await store.dispatch( "generateRoutes", permission ); router.addRoutes(accessRoutes); // 同步到optios.routes對象中，方便在業務組件內部獲取 router.options.routes.push(...accessRoutes); loginLog(); postCrossInfo(); // hack method to ensure that addRoutes is complete // set the replace: true, so the navigation will not leave a history record next({ ...to, replace: true }); } else { // 如果權限信息獲取不成功，拋出錯誤，進行錯誤捕獲處理 const errorMsg = "未獲取到用戶權限"; iview.Message.error(errorMsg); throw new Error(errorMsg); } } catch (error) { // 用戶權限獲取失敗后 清空session,重新登錄 await store.dispatch("resetSession"); setRedirect(to.fullPath); next(`/login`); } } } } else { // 無session信息則跳轉到登錄頁面 if (whiteList.indexOf(String(to.path).toLowerCase()) !== -1) { next(); } else { setRedirect(to.fullPath); next(`/login`); } } } else { // fix: Duplicate named routes definition // 開發環境默認在外部導入全部路由，不異步導入 // router.addRoutes(asyncRoutes); if (to.path === "/login") { next({ path: "/" }); } else { next(); } } }); ~~~ ### 2. 獲取權限信息（調用dispatch方法調用store中user中的獲取權限的方法） ~~~ 獲取用戶權限（const permission = await store.dispatch("userGetPermission"); ） ~~~ ### 3. 有權限之后傳遞給store中的permission ~~~ // 如果權限信息獲取成功，動態添加路由并繼續原來的路由跳轉 const accessRoutes = await store.dispatch( "generateRoutes", permission ); ~~~ ### 4. store中的permission，該文件中有調用utils下的permission中的方法，該方法用于合并本地路由數據與運維數據 ~~~ const actions = { generateRoutes({ commit }, permission) { const accessedRoutes = generateAsyncRoutes(asyncRoutes, permission); commit(SET_ROUTES, accessedRoutes); return accessedRoutes; } }; ···································································· /** * @description 獲取有權限訪問的路由 * @param {Array} asyncRoutes [本地動態路由] * @param {Array} permission [后臺返回帶路由信息的功能結構列表] */ export const generateAsyncRoutes = (asyncRoutes, permission) => { const permissionMap = formatPermission(permission); return filterAsyncRoutesByPermissionMap(asyncRoutes, permissionMap); }; const filterAsyncRoutesByPermissionMap = (asyncRoutes, permissionMap) => { const res = []; asyncRoutes.forEach(route => { // if (route.path === "*") { // res.push(tmp) // } const tmp = { ...route }; let permissionInfo = hasPermission(tmp, permissionMap); if (permissionInfo) { tmp.meta = tmp.meta || {}; let filteredPermissionInfo = filterObject(permissionInfo); tmp.meta = Object.assign(tmp.meta, filteredPermissionInfo); tmp.meta.navTitle = tmp.meta.title; // route.meta混入權限信息 if (tmp.children) { tmp.children = filterAsyncRoutesByPermissionMap( tmp.children, permissionMap ); } // 按運維配置順序對路由進行排序 res[tmp.meta.index] = tmp; } }); return res.filter(item => !!item); }; ~~~ ### 5. 之后就可通過this.$route.mata.commpont來獲取到可以顯示的內容