feat(router): implement dynamic routes rendering when page reloading

Author: lbwa

.env.development

@@ -1,3 +1,3 @@
-VUE_APP_BASE_REQUEST=https://easy-mock.com/mock/5bf3bcec941747724a67a53a
+VUE_APP_BASE_REQUEST=http://localhost:8800
 VUE_APP_KEY=development_key
 VUE_APP_SECRET=development_secret

src/api/routes.js

@@ -1,4 +1,4 @@
 export default {
-  LOGIN: '/login',
-  DYNAMIC_ROUTES: '/dynamic-routes'
+  LOGIN: '/user/login',
+  DYNAMIC_ROUTES: '/user/access'
 }

src/layout/Material.vue

@@ -9,6 +9,21 @@
           type="text"
           @click="onLogout"
         >Logout</el-button>
+        <el-button
+          class="logout"
+          type="text"
+          @click="$router.push('/pages/admin/dashboard')"
+        >dashboard</el-button>
+        <el-button
+          class="logout"
+          type="text"
+          @click="$router.push('/pages/admin/table')"
+        >table</el-button>
+        <el-button
+          class="logout"
+          type="text"
+          @click="$router.push('/pages/common/user')"
+        >user info</el-button>
       </el-header>
 
       <el-main class="layout__material__placeholder-main">

src/permission/index.js

@@ -25,22 +25,29 @@ router.beforeEach((to, from, next) => {
 
   // fetching user private routes
   if (getTokenFromLocal()) { // User has been logged in
-    store.dispatch('login/fetchDynamicRoutes')
-      .then(routes => store.dispatch('login/createGlobalRoutes', routes))
-      .then(() => next())
-      .catch(e => {
-        MessageBox({
-          title: 'Error',
-          message: 'We got a error when fetching user access.',
-          type: 'error'
+    if (
+      !store.state.login.dynamicRoutes.length ||
+      !store.state.login.dynamicRoutes[0].component
+    ) {
+      store.dispatch('login/fetchDynamicRoutes')
+        .then(routes => store.dispatch('login/createGlobalRoutes', routes))
+        .catch(e => {
+          MessageBox({
+            title: 'Error',
+            message: 'We got a error when fetching user access.',
+            type: 'error',
+            showClose: false
+          })
+            .then(() => store.dispatch('login/userLogout'))
+            .then(() => next({
+              path: `/login?redirect=${to.path}`,
+              replace: true
+            }))
+          NProgress.done()
+          console.error(e)
         })
-          .then(() => next({
-            path: `/login?redirect=${to.path}`,
-            replace: true
-          }))
-        NProgress.done()
-        console.error(e)
-      })
+    }
+    next()
   } else {
     next({
       path: `/login?redirect=${to.path}`,

src/router/components/importer.js

@@ -23,12 +23,13 @@ export default function createImporters (components) {
  * @return {String} A name used to import vue component
  */
 export function createChunkName (path) {
-  const normalizePathSection = path.split('/').map((pathSection, index) => {
-    return index === 0
-      ? pathSection.replace(/^[A-Z]/, matchKey => matchKey.toLowerCase())
-      : pathSection.replace(/^[a-z]/, matchKey => matchKey.toUpperCase())
-  })
-  return normalizePathSection.join('')
+  return path.replace(/^\//, '').split('/')
+    .map((pathSection, index) => {
+      return index === 0
+        ? pathSection.replace(/^[A-Z]/, matchKey => matchKey.toLowerCase())
+        : pathSection.replace(/^[a-z]/, matchKey => matchKey.toUpperCase())
+    })
+    .join('')
 }
 
 /**

src/store/modules/login/actions.js

@@ -16,8 +16,8 @@ export default {
       .catch(e => {
         if (e.code === 5000) {
           vm.$messageBox({
-            title: '错误',
-            message: '用户名或密码错误',
+            title: 'Error',
+            message: 'Wrong username or password',
             type: 'error'
           })
         }

src/store/modules/login/mutations/index.js

@@ -18,7 +18,7 @@ export default {
     const components = createImporters(dynamicRoutes)
     state.dynamicRoutes = dynamicRoutes.map(path => {
       // eg. Routes: {
-      //   path: 'page/dashboard',
+      //   path: '/page/dashboard',
       //   component: components.pageDashboard
       // }
       return {
@@ -27,7 +27,7 @@ export default {
       }
     })
   },
-  [types.SET_ALL_ROUTES] (state, allRoutes) {
-    state.allRoutes = allRoutes || [...constantRoutes, ...state.dynamicRoutes]
+  [types.SET_ALL_ROUTES] (state) {
+    state.allRoutes = [...constantRoutes, ...state.dynamicRoutes]
   }
 }