博客

左侧路由只有一个子菜单时显示父菜单

这个没有配置需要自己改

layout->components->sidebar->sidbarItem

搜索这行，将返回改为false就可以了

if (showingChildren.length === 1) 

请求怎么携带formdata

export const addReq = (campusId, formdataV) => {
  const formdata = new FormData();
  formdata.append("file", formdataV);
  return http.request("post", `/AdminArticleBorrow/${campusId}`, {
    data: formdata
  });
};

路由根据权限的管理

一般路由权限是两种方式，一种后台过滤好返回的，一种前端有全部的路由根据后台的角色来过滤，我这里是第二种方式。

我这里是更改的asncRouters.ts,更改为下面这种结构

{
    path: "/inside",
    name: "inside",
    alwaysShow: true,
    // redirect: "/WeiXin/toilet/index",
    meta: {
      // icon: icons.WeiXinY,
      title: "班内管理",
      rank: 4,
      roles: ["任课教师", "副班主任", "校班主任"]
    },
    children: [
      {
        path: "/inside/Class/index",
        name: "insidelClass",
        meta: {
          activeMenu: "/inside",

          title: "班级管理",
          roles: ["校班主任"]
        }
      },
      {
        path: "/Article/Book/index",
        name: "ArticleBook",
        meta: {
          activeMenu: "/Article",

          title: "推荐书目",
          roles: ["校班主任", "副班主任", "任课教师"]
        }
      }
    ]
  },

然后找到router>utils.ts里面的initRouter，这个是初始化路由的方法，开始改造

新建一个是否拥有角色的方法

function hasRole(route, roles) {
  if (route.meta && route.meta.roles) {
    return roles.some(item => route.meta.roles.includes(item));
  } else {
    return false;
  }
}

新建一个过滤路由的方法

// 过滤路由
function filterRouters(routers, role) {
  const filterRouterArr = [];
  routers.forEach(item => {
    const tmp = { ...item };
    if (hasRole(item, role)) {
      if (tmp.children) {
        tmp.children = filterRouters(tmp.children, role);
      }
      filterRouterArr.push(tmp);
    }
  });
  return filterRouterArr;
}

找到initRouter，我这是把和原来的稍微改了一点，逻辑并没变，将原来的路由数组变为我过滤后的

const info = filterRouters(acyncRoutes, getUserInfo().permission);
    router.options.routes[0].redirect = info[0].children[0].path;
    if (info.length === 0) {
      usePermissionStoreHook().changeSetting(info);
    } else {
      formatFlatteningRoutes(addAsyncRoutes(info)).map((v: RouteRecordRaw) => {
        // 防止重复添加路由
        if (
          router.options.routes[0].children.findIndex(
            value => value.path === v.path
          ) !== -1
        ) {
          return;
        } else {
          // 切记将路由push到routes后还需要使用addRoute，这样路由才能正常跳转
          router.options.routes[0].children.push(v);
          // 最终路由进行升序;
          ascending(router.options.routes[0].children);
          if (!router.hasRoute(v?.name)) router.addRoute(v);
          const flattenRouters: any = router
            .getRoutes()
            .find(n => n.path === "/");
          router.addRoute(flattenRouters);
        }
        resolve(router);
      });
      usePermissionStoreHook().changeSetting(info);
    }
    addPathMatch();
    console.log(router);

设置不同的角色跳转不同的首页

我这里是在拦截器加了一层判断

router>index.ts,在router.beforeEach最下面加一层，path为你想要跳转的path，这里的顺序其实就是角色的优先级，假如用户拥有多个角色，就会优先选择第一个。

if (_from.path == "/login" && to.path == "/") {
    const roleTxt = JSON.stringify(getUserInfo().permission);
    const roles = [
      {
        role: "校管理员",
        path: ""
      },
      {
        role: "校班主任",
        path: ""
      },
      {
        role: "副班主任",
        path: ""
      },
      {
        role: "任课教师",
        path: ""
      }
    ];
    for (const item of roles) {
      if (roleTxt.includes(item.role)) {
        routes[0].redirect = item.path;
        router.replace(routes[0].redirect);
        return;
      }
    }
  }