React + Ts后台管理项目路由鉴权

1.实现思路:

2.具体步骤:

  2.1 封装AuthRouter鉴权组件

import { useLocation, Navigate } from "react-router-dom";
import { searchRoute } from "@/utils/util";
import { rootRouter } from "@/routers/index";
import { HOME_URL, WHITE_LIST } from "@/config/config";
import { RootState, useSelector } from "@/redux";

/**
 * @description 路由守卫组件
 * */
const AuthRouter = (props: { children: JSX.Element }) => {
	const { accessToken } = useSelector((state: RootState) => state.gedaiGlobal.token);
	const { authRouter } = useSelector((state: RootState) => state.auth);
	const { pathname } = useLocation();
	const route = searchRoute(pathname, rootRouter);
	
	if (WHITE_LIST.includes(pathname) && pathname === "/gedaiLogin" && accessToken) {
		return <Navigate to={HOME_URL} replace />;
	}
	if (!WHITE_LIST.includes(pathname) && !accessToken) {
		return <Navigate to="/gedaiLogin" replace />;
	}
	if (!WHITE_LIST.includes(pathname) && accessToken && pathname === "/home/index") {
		return props.children;
	}
	if (!WHITE_LIST.includes(pathname) && accessToken && !authRouter.includes(pathname)) {
		return <Navigate to="/403" />;
	}
	return props.children;
};

export default AuthRouter;

  2.2 在App.tsx中引入AuthRouter并使用:

import AuthRouter from "@/routers/utils/authRouter";

const App = () => {
	...
	return (
		<HashRouter>
			<ConfigProvider locale={i18nLocale} componentSize={assemblySize}>
				<AuthRouter>
					<Router />
				</AuthRouter>
			</ConfigProvider>
		</HashRouter>
	);
};

export default App;