实现React、Vue3的动态路由

后端

说明

简单说一下常见的 RBAC (Role Based Access Control) 模型, 主要是由 User、Role、Resource 三个表组成, 如图所示:
User 表存储用户信息, Role 表存储角色信息, Resource 表存储资源信息, User 和 Role 是多对多的关系, Role 和 Resource 是多对多的关系, 通过 UserRole 和 RoleResource 两张中间表来实现多对多的关系, UserRole 表存储 User 和 Role 的关系, RoleResource 表存储 Role 和 Resource 的关系

流程

用户登录之后得到用户 Id user_id
在 user_role 表中根据 user_id 得到对应的角色 role_id
在 role_resource 表中根据 role_id 得到对应的资源 resource_id 列表
在 resource 表中根据 resource_id 得到对应的 resource,
最后组合成列表就是用户拥有的资源

示例一

后端返回处理好的树形结构的数据

[
  { "id": 1, "name": "仪表盘", "icon": "DashboardOutlined", "menuUrl": "/dashboard", "children": [] },
  { "id": 2, "name": "系统管理", "icon": "SettingOutlined", "menuUrl": "/system",
    "children": [
      { "id": 3, "name": "用户管理", "icon": "UserOutlined", "menuUrl": "/system/user", "children": [] },
      { "id": 7, "name": "角色管理", "icon": "ClusterOutlined", "menuUrl": "/system/role", "children": [] },
      { "id": 8, "name": "资源管理", "icon": "DatabaseOutlined", "menuUrl": "/system/resource", "children": [] }
    ]
  },
  { "id": 9, "name": "日志记录", "icon": "CloudServerOutlined", "menuUrl": "/log", "children": [] }
]

示例二

后端返回的是资源列表, 前端需要自己处理成树形结构

[
  { "id": 1, "pid": 0, "icon": "DashboardOutlined", "menuUrl": "/dashboard", "name": "仪表盘" },
  { "id": 2, "pid": 0, "icon": "SettingOutlined", "menuUrl": "/system", "name": "系统管理" },
  { "id": 3, "pid": 2, "icon": "UserOutlined", "menuUrl": "/system/user", "name": "用户管理" },
  { "id": 7, "pid": 2, "icon": "ClusterOutlined", "menuUrl": "/system/role", "name": "角色管理" },
  { "id": 8, "pid": 2, "icon": "DatabaseOutlined", "menuUrl": "/system/resource", "name": "资源管理" },
  { "id": 9, "pid": 0, "icon": "CloudServerOutlined", "menuUrl": "/log", "name": "日志记录" }
]

处理资源列表. 前端常见的面试题

const convertToTree = (menuList, parentId = 0) => {
  const result = [];

  for (const menu of menuList) {
    if (menu.pid === parentId) {
      const children = convertToTree(menuList, menu.id);
      if (children.length) {
        menu.children = children;
      }
      result.push(menu);
    }
  }

  return result;
}

React

示例代码

项目目录

⨽ src
  ⨽ apis
    ⨽ mock.json						# 后端返回的数据
  ⨽ router
    ⨽ index.tsx						# 路由相关
    ⨽ isAuth.tsx					# 认证相关
  ⨽ utils
    ⨽ auth.ts						# localStorage工具类
  ⨽ views						# 页面
    ⨽ error						# 错误页面
    ⨽ layout						# 布局页面
      ⨽ dashboard					# 首页
      ⨽ log						# 日志页面
      ⨽ system						# 系统管理页面
        ⨽ resource					# 资源页面
        ⨽ role						# 角色页面
        ⨽ user						# 用户页面
        ⨽ index.tsx					# 路由出口
    ⨽ login						# 登录页面
  ⨽ App.tsx						# 根组件
  ⨽ main.tsx						# 入口文件

核心代码

main.tsx

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>

    {/* react-router-dom 的 BrowserRouter 组件: 使用浏览器的内置历史记录堆栈进行导航 */}
    <BrowserRouter>
      <App />
    </BrowserRouter>

  </React.StrictMode>
);

App.tsx

function App() {
  const [menus, setMenus] = useState<any>([]); // 动态路由
  const [route, setRoute] = useState(routers); // 所有路由
  const element = useRoutes(route); // set的时候会重新渲染

  const location = useLocation();

  // 模拟请求: 建议使用 useSWR -- https://github.com/zxiaosi/react-springboot/blob/master/frontend/web/src/App.tsx
  useEffect(() => {
    const menuStorage = getLocal("menus") || []; // 这里给一个默认值，防止序列化报错

    if (menuStorage?.length == 0 && location.pathname != "/login") {
      setMenus(menusData); // 当本地缓存中没有菜单且当前路由不是登录页的时候, 去请求接口
    } else {
      setMenus(menuStorage); 
    }

  }, [location.pathname]);

  useEffect(() => {
    const newRoute = generateRouter(menus);
    setRoute(newRoute);
    menus?.length > 0 && setLocal("menus", menus);
  }, [menus]);

  // <></> 组件 -- https://react.dev/reference/react/Fragment
  return <>{element}</>;
}

export default App;

router/index.tsx

import { lazy, Suspense } from "react";
import { Navigate } from "react-router-dom";
import * as Icons from "@ant-design/icons";
import React from "react";
import IsAuth from "./isAuth";
// 参考 https://juejin.cn/post/7132393527501127687

const LAYOUT_PAGE = "layout";

/** 导入指定文件下的路由模块 */
const modules = import.meta.glob("../views/**/*.tsx");
console.log("modules", modules);

/** 异步懒加载组件 */
const lazyLoad = (moduleName: string) => {
  // 根据模块名匹配对应的组件
  const Module = lazy(modules[`../views${moduleName}/index.tsx`] as any);

  return (
    <Suspense fallback={<div>loading...</div>}>
      <Module />
    </Suspense>
  );
};

/** 动态创建Icon */
const dynamicIcon = (icon: string) => {
  const antIcon: { [key: string]: any } = Icons; // 防止类型报错
  return React.createElement(antIcon[icon]);
};

/** 静态路由 */
export const routers: any[] = [
  {
    path: "/",
    element: <Navigate to="/dashboard" replace={true} />,
  },
  {
    path: "/login",
    meta: { title: "登录" },
    element: lazyLoad("/login"),
  },
  {
    path: "/",
    id: LAYOUT_PAGE, // 判断是否插入动态路由的标识
    element: <IsAuth>{lazyLoad("/" + LAYOUT_PAGE)}</IsAuth>,
  },
  {
    path: "*",
    meta: { title: "404" },
    element: lazyLoad("/error"),
  },
];

/** 生成菜单 */
export const generateMenu = (data: any) => {
  const result: any = [];

  data.forEach((item: any, index: number) => {
    result.push({
      key: item.menuUrl,
      label: item.name,
      icon: dynamicIcon(item.icon),
    });

    if (item.children.length > 0) result[index].children = generateMenu(item.children);
  });

  return result;
};

/** 迭代动态路由 */
const iterateRouter = (data: any) => {
  const result: any[] = [];

  // 动态路由
  data?.forEach((item: any, index: number) => {

    result.push({
      path: item.menuUrl,
      meta: { title: item.name, icon: item.icon },
      element: lazyLoad("/" + LAYOUT_PAGE + item.menuUrl),
    });

    if (item.children?.length > 0) result[index].children = iterateRouter(item.children);
  });


  return result;
};

/** 生成路由  */
export const generateRouter = (data: any) => {
  // 1. 迭代动态路由
  const dynamicRouters = data ? iterateRouter(data) : [];

  // 2. 合并所有路由 = 动态路由 + 静态路由
  const idx = routers.findIndex((item: any) => item.id == LAYOUT_PAGE);
  routers[idx].children = [...dynamicRouters];

  return routers.slice(); // 注意这里要浅拷贝返回一个新的数组，否则会报错
};

isAuth.tsx

import { Navigate } from "react-router-dom";
import { clearLocal } from "../utils/auth";

/** 判断是否登录 -- 路由拦截 */
const IsAuth = ({ children }: { children: JSX.Element }) => {
  // const cookie = document.cookie; // cookie 标识
  const token = localStorage.getItem("token"); // token 标识

  /**
   * 这里应该在响应拦截器中处理. 后端返回401状态码，清除本地缓存
   * 但是这里只是模拟，所以直接清除
   */
  !token && clearLocal();

  return token ? children : <Navigate to={"/login"} replace />;
};

export default IsAuth;

Vue3

示例代码

项目目录

⨽ src
  ⨽ apis
    ⨽ mock.json						# 后端返回的数据
  ⨽ router
    ⨽ index.tsx						# 路由相关
  ⨽ utils
    ⨽ auth.ts						# localStorage工具类
  ⨽ views						# 页面
    ⨽ 404.vue						# 错误页面
    ⨽ Layout.vue					# 布局页面
    ⨽ pages						
      ⨽ Dashboard.vue					# 首页
      ⨽ Log.vue						# 日志页面
      ⨽ system						# 系统管理页面
        ⨽ Resource.vue					# 资源页面
        ⨽ Role.vue					# 角色页面
        ⨽ User.vue					# 用户页面
        ⨽ Index.vue					# 路由出口
    ⨽ Login.vue						# 登录页面
  ⨽ App.vue						# 根组件
  ⨽ main.ts						# 入口文件

核心代码

main.tx

const app = createApp(App);

// 注册所有图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

app.use(router); // 挂载路由

app.mount("#app");

App.vue

<template>
  <!-- 路由出口 -->
  <RouterView /> 
</template>

router/index.ts

const LayoutPage = "Layout"; // 布局页

const modules = import.meta.glob("@/views/pages/**/*.vue"); // 获取 views/home/ 下的vue文件

// 静态路由
const staticRoutes = [
  { path: "/", redirect: "/dashboard" }, // 重定向
  {
    path: "/login",
    meta: { title: "登录" },
    component: () => import("@/views/Login.vue"),
  },
  {
    path: "/",
    name: LayoutPage, // 路由名称, 用于添加动态路由 (详见: https://router.vuejs.org/zh/guide/advanced/dynamic-routing.html#%E6%B7%BB%E5%8A%A0%E5%B5%8C%E5%A5%97%E8%B7%AF%E7%94%B1)
    component: () => import(`@/views/${LayoutPage}.vue`),
  },
  {
    path: "/:pathMatch(.*)*",
    meta: { title: "404" },
    component: () => import("@/views/404.vue"),
  },
];

/**
 * 创建路由实例
 */
const router = createRouter({
  history: createWebHistory(),
  routes: staticRoutes,
});

/**
 * 路由守卫
 */
router.beforeEach((to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => {

  document.title = `${to.meta.title} | Demo`; // 页面名

  if (getLocal("token")) { // 检查是否存在token, 不存在则用户登录状态失效

    if (to.path == "/login") {
      next();
    } else {
      const menusStorage = getLocal("menus") || [];

      // 用户已登录
      if (menusStorage.length > 0) {
        if (router.getRoutes().length == staticRoutes.length) { // 如果路由表中的路由数量等于静态路由的数量, 则添加动态路由 (防止重复添加动态路由)
          mergeRoutes(menusStorage, router); // 从缓存中获取菜单列表
          next({ ...to, replace: true }); // 确保 addRoutes 已完成
        } else {
          next();
        }
      } else {

        const menusData = mockData; // 替换为真实接口
        setLocal("menus", menusData); // 存储到本地缓存中
        if (menusData.length > 0) {
          mergeRoutes(menusData, router); // 添加动态路由
          next({ ...to, replace: true });
        } else {
          throw new Error("菜单列表为空");
        }

      }

    }

  } else { // 用户未登录 (防止无限重定向)

    if (to.path == "/login") { // 如果用户访问的是登录页, 直接放行
      next();
    } else { // 如果用户访问的不是登录页, 则重定向到登录页
      next("/login");
    }

  }

});

/**
 * 组装菜单列表
 * @param data 菜单列表
 */
export const iterateMenu = (data: any) => {
  let result: any = [];

  data.forEach((item: any, index: number) => {
    result.push({
      path: item.menuUrl,
      meta: { title: item.name, icon: item.icon },
      component: modules[`/src/views/pages${uriToFileName(item.menuUrl)}.vue`],
    });

    if (item.children.length > 0) result[index].children = iterateMenu(item.children);
  });

  return result;
};

/**
 * 获取路由对应的文件名 eg: /user => User | /home/user => /home/User
 * @param uri 路由地址
 * @returns 文件名
 */
export const uriToFileName = (uri: string) => {
  let strList = uri.split("/");
  let fileName = strList[strList.length - 1];
  let prefix = uri.replace(fileName, "");
  return `${prefix + fileName[0]?.toUpperCase() + fileName?.slice(1)}`;
};

/**
   * 添加动态路由，并同步到状态管理器中
   * @param menus 路由列表
   * @param router 路由实例
   */
export const mergeRoutes = (menus: any, router: any) => {
  // 动态路由
  const dynamicMenu = iterateMenu(menus);

  // 添加到指定路径下得动态路由
  dynamicMenu.forEach((item: any) => router.addRoute("Layout", item));

  /**
   * router.getRoutes() 获取的是所有路由，扁平化输出，看不到嵌套的路由，但实际有嵌套的路由
   * 详见: https://github.com/vuejs/router/issues/600
   */
  // console.log("router", router.getRoutes());
}