feat(route): implement dynamic routes rendering based on server response

Author: lbwa

src/pages/Admin/Dashboard/index.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="admin__dashboard">
+    {{info}}
+    <router-link to="table">table</router-link>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      info: 'this is /pages/admin/dashboard'
+    }
+  }
+}
+</script>
+<style lang='scss' scoped>
+</style>

src/pages/Admin/Table/index.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="admin__table">
+    {{info}}
+    <router-link to="/pages/common/user">user center</router-link>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      info: 'this is /pages/admin/table'
+    }
+  }
+}
+</script>
+<style lang='scss' scoped>
+</style>

src/pages/Common/User.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="common__user">
+    {{info}}
+    <router-link to="/home">home</router-link>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      info: 'this is /pages/common/user'
+    }
+  }
+}
+</script>
+<style lang='scss' scoped>
+</style>

src/pages/Home.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="home">
     This is home page.
+    <router-link to="/pages/admin/dashboard">admin dashboard</router-link>
   </div>
 </template>
 

src/permission/index.js

@@ -35,7 +35,7 @@ router.beforeEach((to, from, next) => {
           type: 'error'
         })
           .then(() => next({
-            path: `/login?redirect=${from.path}`,
+            path: `/login?redirect=${to.path}`,
             replace: true
           }))
         NProgress.done()

src/router/components/importer.js

@@ -9,7 +9,7 @@ export default function createImporters (components) {
     if (!importers[chunkName]) {
       importers[chunkName] = () => import(
         /* webpackChunkName: 'async/[request][index]' */
-        `SOURCE/${path}`
+        `SOURCE/${createCamelPath(path.replace(/^\//, ''), 1)}`
       )
     }
   })
@@ -30,3 +30,23 @@ export function createChunkName (path) {
   })
   return normalizePathSection.join('')
 }
+
+/**
+ * @description convert path to  camelCase path, eg. /aa/bb ---> /Aa/Bb
+ * @param {String} path original path
+ * @param {Number} startIndex reduce should start convert when startIndex equal
+ * to current index, including prefix slash character.
+ * eg. createCamelPath('aaa/bbb/ccc', 1) ==> "/aaa/Bbb/Ccc"
+ * eg. createCamelPath('/aaa/bbb/ccc', 2) ==> "/aaa/Bbb/Ccc"
+ */
+export function createCamelPath (path, startIndex) {
+  return path.split('/')
+    .reduce((result, cur, currentIndex) => {
+      if (!cur) return result.concat('')
+      if (cur && currentIndex >= startIndex) {
+        return result.concat(cur.replace(/^[a-z]/, key => key.toUpperCase()))
+      }
+      return result.concat(cur)
+    }, [])
+    .join('/')
+}

src/store/modules/login/actions.js

@@ -1,5 +1,6 @@
 import { userLogin, fetchDynamicRoutes } from 'API'
 import types from './mutations/types'
+import router from 'ROUTER'
 
 export default {
   userLogin ({ commit }, { username, password, vm }) {
@@ -34,8 +35,9 @@ export default {
     })
       .then(({ routes }) => routes)
   },
-  createGlobalRoutes ({ commit }, routes) {
+  createGlobalRoutes ({ commit, getters }, routes) {
     commit(types.SET_DYNAMIC_ROUTES, routes)
     commit(types.SET_ALL_ROUTES)
+    router.addRoutes(getters.dynamicRoutes)
   }
 }

src/store/modules/login/getters.js

@@ -0,0 +1,10 @@
+export default {
+  // used to add user private routes to global routes map.
+  dynamicRoutes (state) {
+    return state.dynamicRoutes
+  },
+  // used to create recursive aside.
+  allRoutes (state) {
+    return state.allRoutes
+  }
+}

src/store/modules/login/index.js

@@ -1,10 +1,12 @@
 import state from './state'
+import getters from './getters'
 import mutations from './mutations'
 import actions from './actions'
 
 export default {
   namespaced: true,
   state,
+  getters,
   mutations,
   actions
 }