配置登录拦截

1. 创建拦截组件 src\components\AuthRouter\AuthRouter.tsx

import React from "react";
import { Navigate, useLocation } from "react-router-dom";

const AuthRouter = (props: { children: JSX.Element }) => {
  const token = localStorage.getItem("token");
  const { pathname } = useLocation();

  if (pathname === "/login") {
    return props.children;
  }

  if (!token) {
    return <Navigate to="/login" />;
  } else {
    return props.children;
  }
};

export default AuthRouter;

2. App.tsx 中引入

import React from "react";
import GetRouters from "./router/router";
import AuthRouter from "./components/AuthRouter/AuthRouter";

const App = () => {
  return (
    <AuthRouter>
      <GetRouters />
    </AuthRouter>
  );
};

export default App;

3. Login 页面

// etc...
const onFinish = (values: { username: string; password: string }) => {
  localStorage.setItem("token", "wfwefwefwegwerg3wgwer324");
  navigage("/layout/home");
};
// etc...

3. 课程目录

https://www.bilibili.com/video/BV1XR4y1D7Vp?p=1&vd_source=777d17e43452e29f6c42c05c67119ebb