路由注册map改为function返回防止内容篡改; 异步路由时自动将/重定向到第一个子路由作为首页; 增加initRouter方法并调整login成功时路由加载; 当路由缓存意外被清理时自动重新加载

src/pages/login/Login.vue

@@ -75,9 +75,9 @@
 
 <script>
 import CommonLayout from '@/layouts/CommonLayout'
-import {login, getRoutesConfig} from '@/services/user'
+import {login, logout} from '@/services/user'
 import {setAuthorization} from '@/utils/request'
-import {loadRoutes} from '@/utils/routerUtil'
+import {initRoutes} from '@/utils/routerUtil'
 import {mapMutations} from 'vuex'
 
 export default {
@@ -104,6 +104,7 @@ export default {
           this.logging = true
           const name = this.form.getFieldValue('name')
           const password = this.form.getFieldValue('password')
+          logout()
           login(name, password).then(this.afterLogin)
         }
       })
@@ -118,10 +119,8 @@ export default {
         this.setRoles(roles)
         setAuthorization({token: loginRes.data.token, expireAt: new Date(loginRes.data.expireAt)})
         // 获取路由配置
-        getRoutesConfig().then(result => {
+        initRoutes(() => {
-          const routesConfig = result.data.data
+          this.$router.push('/')
-          loadRoutes(routesConfig)
-          this.$router.push('/dashboard/workplace')
           this.$message.success(loginRes.message, 3)
         })
       } else {

src/router/async/router.map.js

@@ -5,8 +5,8 @@ const view = {
   page: () => import('@/layouts/PageView')
 }
 
-// 路由组件注册
+export const initRouterMap = () => {
-const routerMap = {
+  return {
     login: {
       authority: '*',
       path: '/login',
@@ -149,6 +149,11 @@ const routerMap = {
       name: '颜色复选框',
       component: () => import('@/pages/components/Palette')
     }
+  }
 }
+
+// 路由组件注册
+const routerMap = initRouterMap()
+
 export default routerMap
 

src/utils/routerUtil.js

@@ -1,8 +1,10 @@
-import routerMap from '@/router/async/router.map'
+import {initRouterMap} from '@/router/async/router.map'
 import {mergeI18nFromRoutes} from '@/utils/i18n'
 import Router from 'vue-router'
 import deepMerge from 'deepmerge'
 import basicOptions from '@/router/async/config.async'
+import {getRoutesConfig} from '@/services/user'
+import {checkAuthorization} from '@/utils/request'
 
 //应用配置
 let appOptions = {
@@ -67,6 +69,24 @@ function parseRoutes(routesConfig, routerMap) {
   return routes
 }
 
+/**
+ * 初始化路由
+ * @param func function 回调方法
+ */
+function initRoutes(func) {
+  if (!checkAuthorization()) {
+    return
+  }
+  getRoutesConfig().then(result => {
+    if (result.data.data && result.data.data.length > 0) {
+      loadRoutes(result.data.data)
+      if (func){
+        func(result)
+      }
+    }
+  })
+}
+
 /**
  * 加载路由
  * @param routesConfig {RouteConfig[]} 路由配置
@@ -87,17 +107,35 @@ function loadRoutes(routesConfig) {
   // 应用配置
   const {router, store, i18n} = appOptions
 
-  // 如果 routesConfig 有值，则更新到本地，否则从本地获取
+  // 如果 routesConfig 不存在则重新加载
+  if (!routesConfig || routesConfig.length <= 0) {
+    routesConfig = store.getters['account/routesConfig']
+    if (!routesConfig || routesConfig.length <= 0){
+      initRoutes()
+    }
+  }
+  // 如果 routesConfig 有值，则更新到本地
   if (routesConfig) {
     store.commit('account/setRoutesConfig', routesConfig)
-  } else {
-    routesConfig = store.getters['account/routesConfig']
   }
   // 如果开启了异步路由，则加载异步路由配置
   const asyncRoutes = store.state.setting.asyncRoutes
   if (asyncRoutes) {
     if (routesConfig && routesConfig.length > 0) {
-      const routes = parseRoutes(routesConfig, routerMap)
+      const routes = parseRoutes(routesConfig, initRouterMap())
+      // 解决动态路由初始化时找不到首页
+      if (routes && routes.length > 0) {
+        const getFirstChild = (routes) => {
+          const route = routes[0]
+          let path = route.path
+          if (!route.children || route.children.length === 0) {
+            return path
+          }
+          return !(path) || path === '/' ? '/' + getFirstChild(route.children) : path + '/'+ getFirstChild(route.children)
+        }
+        const redirect =  getFirstChild(routes)
+        routes[0].redirect = redirect
+      }
       const finalRoutes = mergeRoutes(basicOptions.routes, routes)
       formatRoutes(finalRoutes)
       router.options = {...router.options, routes: finalRoutes}
@@ -248,4 +286,4 @@ function loadGuards(guards, options) {
   })
 }
 
-export {parseRoutes, loadRoutes, formatAuthority, getI18nKey, loadGuards, deepMergeRoutes, formatRoutes, setAppOptions}
+export {parseRoutes, loadRoutes, initRoutes, formatAuthority, getI18nKey, loadGuards, deepMergeRoutes, formatRoutes, setAppOptions}