>[success] # 動態路由加載 ~~~ 1.上個章節的實現思路，在用戶第一次登陸的時候保存了用戶權限，之后每次當用戶進行路由跳轉的時候， 都會進行一次權限匹配來匹配當前用戶是否可以登陸我們要跳轉的頁面，這種思路需要每次都要判斷 當前用戶是否可以跳轉對應頁面 2.動態路由的思路，我們通過后臺獲取用戶可以訪問頁面的數據，然后我們在第一次登陸的時候將符合該 用戶的路由加入到 'vueRouter' 中 ~~~ >[danger] ##### 后臺的數據格式 ~~~ 1.這次的數據格式和上個章節不同，上個章節是用權限分組為后臺的返回，這個章節我們用路由的列表為 返回的權限為主 ~~~ * 格式 ~~~ { code: 200, mes: 'success', data: { token: jwt.sign({ name: userName }, 'abcd', { expiresIn: '1d' }), rules: { page: { home: true, home_index: true, about: true, argu: true, count_to: true, menu_page: true, upload: true, form: true, folder_tree: true, table_page: true, render_page: true, split_pane: true, parent: true, child: true, named_view: true, store: true, main: true }, component: { edit_button: true, publish_button: false } } } } ~~~ >[info] ## 前端實現思路 ~~~ 1.在router 我們需要將router 拆分成兩個部分，一部分是不可變的'登錄頁'，'404'頁面，或者死所有權限都可見 頁面，另一個部分就是權限部分，這個部分會根據后臺接口返回我們進行重新整合 ~~~ >[danger] ##### 路由部分 ~~~ 1.routerMap 就是權限可變部分 ~~~ ~~~ import Home from '@/views/Home.vue' import Layout from '@/views/layout.vue' export const routerMap = [ { path: '/', name: 'home', component: Layout, children: [ { path: 'home', name: 'home_index', component: Home } ] }, ] export const routes = [ { path: '/login', name: 'login', component: () => import('@/views/login.vue') }, { path: '*', component: () => import('@/views/error_404.vue') } ] ~~~ >[danger] ##### 路由守衛要做的 ~~~ 1.路由守衛這里，簡單粗暴我們獲取用可以訪問的頁面規則后，調用vuex 中的'concatRoutes' 獲取可以訪問的路由 然后將可訪問的路由通過'addRoutes' 和每個人都可以使用的路由進行拼接 ~~~ ~~~ import Vue from 'vue' import Router from 'vue-router' import { routes } from './router' import store from '@/store' import { setTitle, setToken, getToken } from '@/lib/util' Vue.use(Router) const router = new Router({ routes }) const HAS_LOGINED = false router.beforeEach((to, from, next) => { to.meta && setTitle(to.meta.title) const token = getToken() if (token) { // 判斷當前用戶是否是第一次規則匹配 if (!store.state.router.hasGetRules) { store.dispatch('authorization').then(rules => { store.dispatch('concatRoutes', rules).then(routers => { // 將符合規則的路由進行拼接 router.addRoutes(routers) next({ ...to, replace: true }) }).catch(() => { next({ name: 'login' }) }) }).catch(() => { setToken('') next({ name: 'login' }) }) } else { next() } } else { if (to.name === 'login') next() else next({ name: 'login' }) } }) // router.beforeResolve router.afterEach((to, from) => { // logining = false }) export default router ~~~ >[danger] ##### 在vuex 做的 ~~~ 1.為了更好區分在vuex 的創建'src\store\module\router.js',這里做的就是講路由進行重新整理生成一個符合使用 的路由列表 ~~~ ~~~ import { routes, routerMap } from '@/router/router' const state = { routers: routes, hasGetRules: false } const mutations = { CONCAT_ROUTES (state, routerList) { state.routers = routerList.concat(routes) state.hasGetRules = true } } const getAccesRouterList = (routes, rules) => { return routes.filter(item => { if (rules[item.name]) { if (item.children) item.children = getAccesRouterList(item.children, rules) return true } else return false }) } const actions = { concatRoutes ({ commit }, rules) { return new Promise((resolve, reject) => { try { let routerList = [] // 如果每個都符合直接 使用全部，不符合在使用遞歸 if (Object.entries(rules).every(item => item[1])) { routerList = routerMap } else { routerList = getAccesRouterList(routerMap, rules) } commit('CONCAT_ROUTES', routerList) resolve(state.routers) } catch (err) { reject(err) } }) } } export default { state, mutations, actions } ~~~