React登录路由守卫实现

import { useEffect } from "react";
import router from "./index";
// WithLoadingComp ：懒加载用的
import WithLoadingComp from "./RouterLazy";
import { useRoutes, useLocation, useNavigate } from "react-router-dom";
import { getSession } from "utils/storage";
import { message } from "antd";

/**
 * 1、有token去登录页，则重定向到首页，并提示已登录
 * 2、无token去首页，重定向到登录页，并其实请先进行登录
 * 3、其余的都可防行
 * */

// 需要登录，无权限访问首页
function NeetLogin() {
  const navigate = useNavigate();
  useEffect(() => {
    navigate("/login");
    // 回到登录页再进行提示
    message.warning("请先进行登录操作！");
  }, []);
  return <></>;
}

// 有权限，去首页
function AuthPage() {
  const navigate = useNavigate();
  useEffect(() => {
    navigate("/page1");
    // 重定向首页了，再进行提示
    message.warning("您已经登录过了");
  }, []);
  return <></>;
}

export default function RouterView() {
  const { pathname } = useLocation();
  const element = useRoutes(router);

  const token = getSession();
  if (token && pathname === "/login") {
    return WithLoadingComp(<AuthPage />);
  }
  if (!token && pathname !== "/login") {
    return WithLoadingComp(<NeetLogin />);
  }

  return element;
}