在 vuex 中建立一个 permission.js 文件用于合并静态和动态的路由规则

结果会获取完整的用户的路由规则

// 新建一个vuex模块来专门处理权限相关操作
import { constantRoutes, asyncRoutes } from "@/router";

export default {
  namespaced: true,
  state() {
    return {
      // 准备routes是静态路由和动态路由合并之后的内容（提供给侧边栏去渲染）
      routes: constantRoutes,
    };
  },
  getters: {},
  mutations: {
    setRoutes(state, data) {
      // data就是整理好的当前用户的动态路由映射数组  菜单显示
      state.routes = [...constantRoutes, ...data];
    },
  },
  actions: {
    // 用来整理出属于当前用户的动态路由映射数组
    filterRoutes(context, data) {
      // data是当前用户的权限点标识
      // asyncRoutes 是完整的动态路由映射数组
      // 思路：遍历每个动态路由映射是否在当前用户的页面权限标识中
      // 如果在就说明拥有改页面访问权限，返回这个路由映射
      let userAsyncRoutes = asyncRoutes.filter((item) => {
        return data.includes(item.name);
      });
      // 当前用户的动态路由
      // console.log(userAsyncRoutes);
      // 赋给state里面的routes，形成完整的静态+动态
      userAsyncRoutes.push({ path: "*", redirect: "/404", hidden: true });
      context.commit("setRoutes", userAsyncRoutes);
      // 返回该用户的动态路由信息
      return userAsyncRoutes;
    },
  },
};