react_14

动态路由

路由分成两部分:

  • 静态路由,固定的部分,如主页、404、login 这几个页面

  • 动态路由,变化的部分,经常是主页内的嵌套路由,比如 Student、Teacher 这些

动态路由应该是根据用户登录后,根据角色的不同,从后端服务获取,因为这些数据是变化的,所以用 mobx 来管理

在src\store\路径下新建RoutesStore.tsx

TypeScript 复制代码
import axios from "axios";
import {
  LoginReq,
  LoginResp,
  Menu,
  MenuAndRoute,
  Route,
} from "../model/Student";
import R from "../model/R";
import { makeAutoObservable, runInAction } from "mobx";
import { Link, Navigate, RouteObject } from "react-router-dom";
import { load } from "../router/MyRouter";
import A8Main from "../pages/A8Main";
import A8NotFound from "../pages/A8NotFound";
import { ItemType } from "antd/es/menu/hooks/useItems";
import Icon from "./Icon";
//其中 convertMenu 为核心方法,负责将服务器返回的 Menu 转换成 antd Menu 组件需要的 Menu
function convertMenu(m: Menu): ItemType {
  const Label = m.routePath ? <Link to={m.routePath}>{m.label}</Link> : m.label;
  return {
    key: m.key,
    label: Label,
    icon: <Icon name={m.icon}></Icon>,
    children: m.children && m.children.map(convertMenu),
  };
}
class RoutesStore {
  dynamicRoutes: Route[] = [];
  dynamicMenus: Menu[] = [];
  token: string = "";
  message: string = "";
  state: string = "pending";
  async login(loginReq: LoginReq) {
    this.state = "pending";
    const resp1 = await axios.post<R<LoginResp>>(
      "http://localhost:8080/api/loginJwt",
      loginReq
    );
    if (resp1.data.code === 999) {
      const resp2 = await axios.get<R<MenuAndRoute>>(
        `http://localhost:8080/api/menu/${loginReq.username}`
      );
      runInAction(() => {
        this.dynamicRoutes = resp2.data.data.routeList;

        localStorage.setItem(
          "dynamicRoutes",
          JSON.stringify(this.dynamicRoutes)
        );
        this.dynamicMenus = resp2.data.data.menuTree;
        localStorage.setItem("dynamicMenus", JSON.stringify(this.dynamicMenus));
        this.token = resp1.data.data.token;
        localStorage.setItem("token", this.token);
        this.state = "success";
      });
    } else {
      runInAction(() => {
        this.state = "error";
        this.message = resp1.data.message || "未知错误";
      });
    }
  }
  /*   async fetch(username: string) {
    const resp = await axios.get<R<MenuAndRoute>>(
      `http://localhost:8080/api/menu/${username}`
    );
    runInAction(() => {
      this.dynamicRoutes = resp.data.data.routeList;
      //当在浏览器地址栏重新输入路径的时候,会重新向7070服务器发送一个请求,导致RoutesStore.tsx重新执行,
      //导致路由对象重新被创建,那么登录之后获得的动态路由数据就会丢失,所以为了防止这种情况,把登录后获得的
      //路由数据存入到localStorage中
      localStorage.setItem("dynamicRoutes", JSON.stringify(this.dynamicRoutes));
      this.dynamicMenus = resp.data.data.menuTree;
      localStorage.setItem("dynamicMenus", JSON.stringify(this.dynamicMenus));
    });
  } */
  get routes() {
    const staticRoutes: RouteObject[] = [
      {
        path: "/login",
        element: load("A8Login"),
      },
      {
        path: "/",
        element: <A8Main></A8Main>,
        children: [],
      },
      {
        path: "/404",
        element: <A8NotFound></A8NotFound>,
      },
      // 使用这个路径,上面的路径匹配不到时,显示notFound页面,但是路径还是输入的路径不变
      { path: "/*", element: <A8NotFound></A8NotFound> },
      //   使用这种路径写法的时候,上面的路径匹配不到时,页面是重定向到notFound,路径会跳转到404
      {
        path: "/*",
        element: <Navigate to={"/404"}></Navigate>,
      },
    ];
    staticRoutes[1].children = this.dynamicRoutes.map((r) => {
      return { path: r.path, element: load(r.element) };
    });
    return staticRoutes;
  }
  get menus() {
    return this.dynamicMenus.map(convertMenu);
  }
  get username() {
    if (this.token.length === 0) {
      return "";
    }
//token 的前两部分都可以解码出来,其中 [1] 就是 token 的内容部分
    const json = atob(this.token.split(".")[1]);
    //parse方法把字符串还原成对象
    return JSON.parse(json).sub;
  }
  constructor() {
    makeAutoObservable(this);
    //页面刷新会重新调用构造器,这个时候从localStorage中获取存储的路由数据
    const routesJson = localStorage.getItem("dynamicRoutes");
    this.dynamicRoutes = routesJson ? JSON.parse(routesJson) : [];
    const menusJson = localStorage.getItem("dynamicMenus");
    this.dynamicMenus = menusJson ? JSON.parse(menusJson) : [];
  }
  reset() {
    localStorage.removeItem("dynamicRoutes");
    this.dynamicRoutes = [];
    localStorage.removeItem("dynamicMenus");
    this.dynamicMenus = [];
    localStorage.removeItem("token");
    this.token = "";
    this.state = "pending";
  }
}
export default new RoutesStore();
  • 其中用 localStorage 进行了数据的持久化,避免刷新后丢失数据

  • 跳转若发生错误,可能是因为组件懒加载引起的,需要用 Suspense 解决

TypeScript 复制代码
root.render(
  <ConfigProvider locale={zhCN}>
    <BrowserRouter>
      <Suspense fallback={<h3>加载中...</h3>}>
        <MyRouter></MyRouter>
      </Suspense>
    </BrowserRouter>
  </ConfigProvider>
)
相关推荐
小镇程序员6 分钟前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐8 分钟前
前端图像处理(一)
前端
程序猿阿伟15 分钟前
《智能指针频繁创建销毁:程序性能的“隐形杀手”》
java·开发语言·前端
疯狂的沙粒17 分钟前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪26 分钟前
AJAX的基本使用
前端·javascript·ajax
力透键背28 分钟前
display: none和visibility: hidden的区别
开发语言·前端·javascript
程楠楠&M39 分钟前
node.js第三方Express 框架
前端·javascript·node.js·express
weiabc39 分钟前
学习electron
javascript·学习·electron
盛夏绽放1 小时前
Node.js 和 Socket.IO 实现实时通信
前端·后端·websocket·node.js
想自律的露西西★1 小时前
用el-scrollbar实现滚动条,拖动滚动条可以滚动,但是通过鼠标滑轮却无效
前端·javascript·css·vue.js·elementui·前端框架·html5