动态路由

src/permission.js

+import router from "./router/index";
+import store from "./store";
+
+
+router.beforeEach( async (to, from, next) => {
+debugger
+    if (sessionStorage.getItem('token') != null) {
+        if (to.path === '/login') {
+            next()
+        } else {
+            const hasRoles = store.getters.roles && store.getters.roles.length > 0
+            if (hasRoles) {
+                next()
+            } else {
+                try {
+                    // get user info
+                    // note: roles must be a object array! such as: ['admin'] or ,['developer','editor']
+                    const roles = JSON.parse(sessionStorage.getItem('userInfo')).permission.split(',')
+                    store.commit('user/SET_ROLES', roles)
+                   
+                    // generate accessible routes map based on roles
+                    const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
+                    // dynamically add accessible routes
+                    router.addRoutes(accessRoutes)
+
+                    // hack method to ensure that addRoutes is complete
+                    // set the replace: true, so the navigation will not leave a history record
+                    next({ ...to, replace: true })
+                } catch (error) {
+                    // remove token and go to login page to re-login
+                    Message.error(error || 'Has Error')
+                    next(`/login?redirect=${to.path}`)
+                }
+            }
+        }
+    } else {
+        if (to.path === '/login') {
+            next();
+          } else {
+            next('/login');
+          }
+    }
+})
\ No newline at end of file

src/router/index.js

@@ -77,10 +77,19 @@ VueRouter.prototype.pushToTab = function pushToTab(location) {
 
 Vue.use(VueRouter);
 
-const mainRouters = [
-    ...dxwlzpRoutes,
+
+export const constantRoutes = [
     ...indexRoutes,
+    {
+        path: "*",
+        name: "error",
+        component: () => import("@/views/index/error.vue")
+    },
+];
+
+export const asyncRoutes = [
     ...zdxxRoutes,
+    ...dxwlzpRoutes,
     ...zdsswpRoutes,
     ...xsspPtRoutes,
     sfRoutes,
@@ -126,18 +135,22 @@ const mainRouters = [
     ...pgypbgglRoutes,
     ...commonServerRoutes,
     ...aiModuleRoutes,
-    {
-        path: "*",
-        name: "error",
-        component: () => import("@/views/index/error.vue")
-    },
-];
+]
+
+const createRouter = () => new VueRouter({
+    // mode: 'history', // require service support
+    scrollBehavior: () => ({ y: 0 }),
+    routes:  [...constantRoutes,...asyncRoutes]
+  })
+  
+const router = createRouter()
 
-const router = new VueRouter({
-    // mode: "history",
-    // base: process.env.BASE_URL,
-    routes: mainRouters
-});
+
+// const router = new VueRouter({
+//     // mode: "history",
+//     // base: process.env.BASE_URL,
+//     routes: constantRoutes
+// });
 
 router.beforeEach((to, from, next) => {
     if (to.meta.isAdd) {
@@ -152,20 +165,6 @@ router.beforeEach((to, from, next) => {
     }
     next()
 })
-// 路由守卫，控制访问权限
-// router.beforeEach((to, from, next) => {
-//   if (store.getters.siteInfo && !store.getters.siteInfo.web_status && to.path != "/closed") {
-//       return next("/closed")
-//   }
-
-//   if (to.meta.auth) {
-//       const token = getToken()
-//       if (!token) {
-//           return next(`/login?redirect=${encodeURIComponent(to.fullPath)}`)
-//       }
-//   }
-//   next()
-// })
 
 
 export default router;

src/store/getters.js

@@ -8,7 +8,8 @@ const getters = {
   Breadcrumbs: state => state.user.Breadcrumbs,
   leftMenu: state => state.user.leftMenu,
   header: state => state.user.header,
-  mxglList: state => state.mxgl.mxglList
+  mxglList: state => state.mxgl.mxglList,
+  roles: state => state.user.roles,
 };
 
 export default getters;

src/store/index.js

@@ -4,21 +4,23 @@ import getters from "./getters";
 import createPersistedState from "vuex-persistedstate";
 import user from "./modules/user";
 import mxgl from "./modules/mxgl";
+import permission from "./modules/permission";
 
 Vue.use(Vuex);
 
 const store = new Vuex.Store({
   modules: {
     user,
-    mxgl
+    mxgl,
+    permission
   },
   getters,
   plugins: [
     createPersistedState({
       storage: window.localStorage,
       reducer(val) {
-        const { user } = val;
-        return { user };
+        const { user,permission } = val;
+        return { user,permission };
       }
     })
   ]

src/store/modules/permission.js

+import { asyncRoutes, constantRoutes } from '@/router'
+
+/**
+ * Use meta.role to determine if the current user has permission
+ * @param roles
+ * @param route
+ */
+function hasPermission(roles, route) {
+  debugger
+  if (route.meta && route.meta.roles) {
+    return roles.some(role => route.meta.roles.includes(role))
+  } else {
+    return true
+  }
+}
+
+/**
+ * Filter asynchronous routing tables by recursion
+ * @param routes asyncRoutes
+ * @param roles
+ */
+export function filterAsyncRoutes(routes, roles) {
+  const res = []
+debugger
+  routes.forEach(route => {
+    const tmp = { ...route }
+    if (hasPermission(roles, tmp)) {
+      if (tmp.children) {
+        tmp.children = filterAsyncRoutes(tmp.children, roles)
+      }
+      res.push(tmp)
+    }
+  })
+
+  return res
+}
+
+const state = {
+  routes: [],
+  addRoutes: []
+}
+
+const mutations = {
+  SET_ROUTES: (state, routes) => {
+    state.addRoutes = routes
+    state.routes = constantRoutes.concat(routes)
+  }
+}
+
+const actions = {
+  generateRoutes({ commit }, roles) {
+    return new Promise(resolve => {
+      debugger
+      let accessedRoutes
+      if (roles.includes('admin')) {
+        accessedRoutes = asyncRoutes || []
+      } else {
+        accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
+      }
+      commit('SET_ROUTES', accessedRoutes)
+      resolve(accessedRoutes)
+    })
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}

src/store/modules/user.js

@@ -18,7 +18,8 @@ const state = {
   topMenu: [],
   Breadcrumbs: [],
   leftMenu: [],
-  header: ''
+  header: '',
+  roles:[]
 };
 
 const mutations = {
@@ -42,6 +43,10 @@ const mutations = {
   },
   SET_Header: (state, content) => {
     state.header = content;
+  },
+  SET_ROLES: (state, roles) => {
+    debugger
+    state.roles = roles
   }
 };