路由权限控制

路由权限有两种

• 后台返回权限比如 admin.guest 之类的.这种是前端在路由文件里面 roles 就能判断

• 第二种就是后端仅仅给你返回路由路径.你自己去筛选

我们说的就是第二种

1.创建筛选文件和方法

• 创建 src/router/routertools.js

import router, { constantRoutes, dynamicRoutes } from "@/router";
import path from "path-browserify";

export const filterResultRouter = (rules) => {
  // 1. 筛选出符合条件的路由
  const first = filterOneRouter(rules);
  console.log(first);
  // 2.过滤children
  filtersecondRouter(first, rules);

  return first;
};

// 1. 筛选出符合条件的路由

const filterOneRouter = (rules) => {
  console.log(router);
  const AllRouters = dynamicRoutes;
  const AllRouters_result = [];

  rules.forEach((item) => {
    const result = AllRouters.find((el) => el.path === item);
    if (result) {
      AllRouters_result.push(result);
    }
  });
  return AllRouters_result;
};

// 2.组合

const filtersecondRouter = (first, rules) => {
  const result = [];
  let path_url = "";
  first.forEach((item, index) => {
    // 有没有children
    if (item.children) {
      // 第一层children
      const arr = item.children.filter((content, index2) => {
        path_url = path.resolve(item.path, content.path);

        return rules.indexOf(path_url) !== -1;
      });
      // 第二层children
      arr.forEach((content) => {
        let path_url = "";
        if (content.children) {
          const arr_children = content.children.filter((content2, index2) => {
            path_url = path.resolve(item.path, content.path, content2.path);
            return rules.indexOf(path_url) !== -1;
          });

          content.children = arr_children;
        }
      });

      item.children = arr;
    }
  });
};

2.修改 permission.js 文件

• store/modules/permission.js

找到 generateRoutes 修改代码

// 过滤开始
import { filterResultRouter } from "@/router/routertools";

generateRoutes(roles) {
  return new Promise((resolve) => {
    /* 开始过滤器 */
    const rules = [
      "/monitor",
      "/monitor/online",
      "/study/demo1",
      "/study/demo2",
      "/study",
      "/system",
      "/system/log",
      "/system/log/logininfor",
      "/system/dept",
    ];
    const result = filterResultRouter(rules);
    console.log("*******");
    console.log(result);
    /* 结束过滤器 */
    const sdata = JSON.parse(JSON.stringify(result));
    const rdata = JSON.parse(JSON.stringify(result));
    const defaultData = JSON.parse(JSON.stringify(result));
    const sidebarRoutes = filterAsyncRouter(sdata);

    const rewriteRoutes = filterAsyncRouter(rdata, false, true);

    const defaultRoutes = filterAsyncRouter(defaultData);

    const asyncRoutes = filterDynamicRoutes(dynamicRoutes);

    asyncRoutes.forEach((route) => {
      router.addRoute(route);
    });
    this.setRoutes(rewriteRoutes);
    this.setSidebarRouters(constantRoutes.concat(sidebarRoutes));
    this.setDefaultRoutes(sidebarRoutes);
    this.setTopbarRoutes(defaultRoutes);
    resolve(rewriteRoutes);
  });
},

注意

1. rules 就是后台返回的所有路由

2. 这里他做了一个转换 component 里面只用写路径即可.二级目录前面不用加/号