VUEX+addRoute实现动态路由_addrouters

VUEX

//this.$store.state.addRouters  							//state.js
//this.$store.getters.addRoutersPath    					//getters.js
//this.$store.commit(' SET_ADD_ROUTERS',newAddRouters)      //mutations.js
//this.$store.dispatch("callUserInfor").then(() => {})      //actions.js
1
2
3
4

state.js

const state = {
  addRouters: undefined, // 需要添加的动态路由
  topNavigation: undefined, // 顶部导航栏
  leftNavigation: undefined, // 左侧导航栏
}
export default state

//使用:
//this.$store.state.addRouters
1
2
3
4
5
6
7
8
9

getters.js

const getters = {
	addRoutersPath: (state) => {
      return state.addRouters.filter(item=> item.path)
    }
}
export default getters
//用处：从 store 中的 state 中派生出一些状态
//使用:
//this.$store.getters.addRoutersPath
1
2
3
4
5
6
7
8
9

mutations.js

  SET_ADD_ROUTERS: (state, data) => {
    state.addRouters = data
  },
  SET_USE_RSET: (state, data) => {
    state.userSet = data
  },
  SET_TOP_NAVIGATION: (state, data) => {
    state.topNavigation = data
  },
  SET_LEFT_NAVIGATION: (state, data) => {
    state.leftNavigation = data
  },
//用处：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
//使用:
//this.$store.commit(' SET_ADD_ROUTERS',newAddRouters)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

actions.js

import { getUserInfo } from "api/index";
//自定义方法，用于处理接口数据
import { generateIndexRouter, getTopNavigation } from "@/utils/util";
import router from "@/router";

const actions = {
  callUserInfor({ commit }) {
    return new Promise((resolve, reject) => {
      getUserInfo()
        .then(res => {
          if (JSON.stringify(res.data) !== "{}" && JSON.stringify(res.data) !== "[]") {
            const menu = generateIndexRouter(res.data?.menu)
            window.sessionStorage.setItem("menu",
              JSON.stringify(res?.data?.menu))
            commit("SET_ADD_ROUTERS", menu);
            const header = getTopNavigation(res.data?.menu)
            window.sessionStorage.setItem("head", JSON.stringify(header));
            commit("SET_TOP_NAVIGATION", header);
            // 清空路由防止重复添加 或者清除之前添加的权限路由
            router.selfaddRoutes(menu);
          } else {
            commit("SET_ADD_ROUTERS", undefined);
            commit("SET_TOP_NAVIGATION", undefined);
            // 清空路由防止重复添加 或者清除之前添加的权限路由
            // router.selfaddRoutes()
          }
          resolve(res);
        })
        .catch(error => {
          reject(error);
        });
    });
  }
};
export default actions;

//用处：Action 提交的是 mutation，而不是直接变更状态。
//		Action 可以包含任意异步操作。
//使用:
//this.$store.dispatch("callUserInfor").then(() => {})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

router.js

import store from "../store";

const createRouter = () => new VueRouter({
  mode: "hash",
  routes: constantRouterMap
});
const router = createRouter();
// 解决重复登录时重复添加路由 或者 高级权限改低级权限时 某些路由已经注入的问题
router.selfaddRoutes = params => {
  const newRouter = createRouter();
  router.matcher = newRouter.matcher;
   // 新路由实例matcer，赋值给旧路由实例的matcher，（相当于replaceRouter）
  if (params) {
    router.addRoute(params);
  }
  router.history.setupListeners()
};


// 路由拦截
router.beforeEach((to, from, next) => {
  if (store.state.topNavigation) {
        // 判断是否已经选择工作空间
        next();
      } else {
        // 如果store中不存在用户信息，说明页面进行了刷新，重新拉取并更新路由
        store.dispatch("callUserInfor").then(() => {
          const name = window.localStorage.getItem("name");
          let left; // 左侧导航栏
          const { topNavigation } = store.state;
          if (name !== "工作空间" && topNavigation) {
            left = topNavigation.filter(item => item.name === name)[0].left;
          }
          store.commit("SET_LEFT_NAVIGATION", left);
          next({
            path: to.fullPath
          });
        });
      }
)}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40