feat: #页面路由增加动态配置

src/layout/components/Sidebar/index.vue

@@ -13,7 +13,7 @@
         mode="vertical"
       >
         <sidebar-item
-          v-for="route in routes"
+          v-for="route in permission_routes"
           :key="route.path"
           :item="route"
           :base-path="route.path"
@@ -33,9 +33,6 @@ export default {
   components: { SidebarItem, Logo },
   computed: {
     ...mapGetters(['permission_routes', 'sidebar']),
-    routes() {
-      return this.$router.options.routes;
-    },
     activeMenu() {
       const route = this.$route;
       const { meta, path } = route;

src/permission.js

@@ -1,46 +1,59 @@
-import router from './router'
-import store from './store'
-import { Message } from 'element-ui'
-import NProgress from 'nprogress' // progress bar
-import 'nprogress/nprogress.css' // progress bar style
-import { getToken } from '@/utils/auth' // get token from cookie
-import getPageTitle from '@/utils/get-page-title'
+import router from './router';
+import store from './store';
+import { Message } from 'element-ui';
+import NProgress from 'nprogress'; // progress bar
+import 'nprogress/nprogress.css'; // progress bar style
+import { getToken } from '@/utils/auth'; // get token from cookie
+import getPageTitle from '@/utils/get-page-title';
 
-NProgress.configure({ showSpinner: false }) // NProgress Configuration
+NProgress.configure({ showSpinner: false }); // NProgress Configuration
 
-const whiteList = ['/login'] // no redirect whitelist
+const whiteList = ['/login']; // no redirect whitelist
 
-router.beforeEach(async(to, from, next) => {
+router.beforeEach(async (to, from, next) => {
   // start progress bar
-  NProgress.start()
+  NProgress.start();
 
   // set page title
-  document.title = getPageTitle(to.meta.title)
+  document.title = getPageTitle(to.meta.title);
 
   // determine whether the user has logged in
-  const hasToken = getToken()
+  const hasToken = getToken();
 
   if (hasToken) {
     if (to.path === '/login') {
       // if is logged in, redirect to the home page
-      next({ path: '/' })
-      NProgress.done()
+      next({ path: '/' });
+      NProgress.done();
     } else {
-      const hasGetUserInfo = store.getters.name
+      const hasGetUserInfo = store.getters.name;
       if (hasGetUserInfo) {
-        next()
+        next();
       } else {
         try {
           // get user info
-          await store.dispatch('user/getInfo')
+          const { roles } = await store.dispatch('user/getInfo');
+          // await store.dispatch('user/getInfo');
 
-          next()
+          // generate accessible routes map based on roles
+          const accessRoutes = await store.dispatch(
+            'permission/generateRoutes',
+            roles
+          );
+
+          console.error(accessRoutes);
+
+          // dynamically add accessible routes
+          router.addRoutes(accessRoutes);
+
+          next({ ...to, replace: true });
+          // next()
         } catch (error) {
           // remove token and go to login page to re-login
-          await store.dispatch('user/resetToken')
-          Message.error(error || 'Has Error')
-          next(`/login?redirect=${to.path}`)
-          NProgress.done()
+          await store.dispatch('user/resetToken');
+          Message.error(error || 'Has Error');
+          next(`/login?redirect=${to.path}`);
+          NProgress.done();
         }
       }
     }
@@ -49,16 +62,16 @@ router.beforeEach(async(to, from, next) => {
 
     if (whiteList.indexOf(to.path) !== -1) {
       // in the free login whitelist, go directly
-      next()
+      next();
     } else {
       // other pages that do not have permission to access are redirected to the login page.
-      next(`/login?redirect=${to.path}`)
-      NProgress.done()
+      next(`/login?redirect=${to.path}`);
+      NProgress.done();
     }
   }
-})
+});
 
 router.afterEach(() => {
   // finish progress bar
-  NProgress.done()
-})
+  NProgress.done();
+});

src/store/modules/permission.js

@@ -51,9 +51,9 @@ const actions = {
     console.warn(roles);
     return new Promise(resolve => {
       let accessedRoutes = asyncRoutes;
-      commit('SET_ROUTES', []);
-      // commit('SET_ROUTES', accessedRoutes);
-      // resolve(accessedRoutes);
+      // commit('SET_ROUTES', []);
+      commit('SET_ROUTES', accessedRoutes);
+      resolve(accessedRoutes);
     });
     // return new Promise(resolve => {
     //   let accessedRoutes = asyncRoutes;

src/store/modules/user.js

@@ -75,7 +75,7 @@ const actions = {
           commit('SET_NAME', name);
           commit('SET_AVATAR', avatar);
 
-          dispatch('permission/generateRoutes');
+          // dispatch('permission/generateRoutes');
           resolve(data);
         })
         .catch(error => {