路由拦截

kuangshp · kuangshp · commit 5671fa2ea96f · 2020-06-02T13:18:19.000+08:00
diff --git a/src/components/menus/Menus.vue b/src/components/menus/Menus.vue
@@ -48,9 +48,6 @@ export default {
       return this.$route.path.replace('/', '');
     }
   },
-  mounted () {
-    console.log('当前的路由', this.menuList);
-  },
   components: {
     MenuItem,
   },
diff --git a/src/router/router.js b/src/router/router.js
@@ -37,9 +37,7 @@ const router = new VueRouter({
  * @param {type} 
  * @return: 
  */
-// eslint-disable-next-line no-unused-vars
 const auth = (to, from, next) => {
-  console.log(to.meta.unauth, Boolean(storage.getItem(authToken)), to.fullPath);
   // 如果需要登录的地址及本地不存在authToken的时候就到登录页面
   if (!to.meta.unauth && !storage.getItem(authToken)) {
     Vue.prototype.$notify({
@@ -50,15 +48,21 @@ const auth = (to, from, next) => {
   }
 }
 
+/**
+ * @Author: 水痕
+ * @Date: 2020-06-02 13:10:09
+ * @LastEditors: 水痕
+ * @Description: 根据后端返回的菜单接口权限来拦截本地菜单路由
+ * @param {type} 
+ * @return: 
+ */
 const authRoutes = async (to, from, next) => {
-  if (!store.state.hasPermission) {
-    const routes = await store.dispatch('getAuthRoutes');
-    // router.options.routes[0].children.push(...routes);
-    router.addRoutes(routes);
-    console.log(routes, '////', router.options.routes)
+  const routes = await store.dispatch('getMenuListApi');
+  const routesUrlList = routes.map(item => item.index);
+  if (routesUrlList.includes(to.name)) {
     next({ ...to, replace: true });
   } else {
-    next();
+    next({ name: 'home', replace: true });
   }
 }
 /********************************路由拦截配置 start********************************/
diff --git a/src/store/modules/menus.js b/src/store/modules/menus.js
@@ -1,40 +1,10 @@
 import MenuService from '@/services/menu';
-import { constantRoutes } from '@/router/constant-routes';
-
-/**
- * @Author: 水痕
- * @Date: 2020-06-02 09:57:15
- * @LastEditors: 水痕
- * @Description: 根据服务器返回的路由文件过滤本地的路由文件数据
- * @param {type} 
- * @return: 
- */
-const getRoutes = (authList) => {
-  const auth = authList.map(item => item.index);
-  // 对当前本地的路由文件进行过滤
-  const filterRoutes = (authRoutes) => {
-    return authRoutes.filter(route => {
-      if (auth.includes(route.name)) {
-        // 递归遍历子菜单
-        if (route.children) {
-          route.children = filterRoutes(route.children);
-        }
-        return route;
-      }
-    })
-  }
-  return filterRoutes(constantRoutes);
-}
 
 export default {
   state: {
-    hasPermission: false, // 判断是否有权限
-    authMenuList: [], // 授权的菜单列表
+    authMenuList: [], // 授权的菜单列表(服务器端的)
   },
   mutations: {
-    setPermission (state) {
-      state.hasPermission = true;
-    },
     setAuthMenuList (state, payload) {
       state.authMenuList = payload;
     }
@@ -44,13 +14,7 @@ export default {
     async getMenuListApi ({ commit }) {
       const { menuList } = await MenuService.getMenuList();
       commit('setAuthMenuList', menuList);
-      commit('setPermission');
       return menuList;
     },
-    // 根据获取的菜单，动态添加路由到本地路由文件
-    async getAuthRoutes ({ dispatch }) {
-      const authList = await dispatch('getMenuListApi');
-      return getRoutes(authList);
-    }
   }
 }
diff --git a/src/utils/menu.js b/src/utils/menu.js
@@ -25,7 +25,6 @@ export const getTreeList = (dataList) => {
     }
     return arr;
   }, []);
-  console.log(formatArray);
   return formatArray;
 };
 

Original file line number	Diff line number	Diff line change
`@@ -25,7 +25,6 @@ export const getTreeList = (dataList) => {`
`25`	`25`	`}`
`26`	`26`	`return arr;`
`27`	`27`	`}, []);`
`28`		`- console.log(formatArray);`
`29`	`28`	`return formatArray;`
`30`	`29`	`};`
`31`	`30`