React 路由登录和用户身份鉴权

项目地址： https://gitee.com/cjperfect/react_router_permission

效果图：

项目目录：

安装依赖

yarn add react-router-dom

react-router-dom新版本使用方法不同（新版本6.xxx）， 可能会出现以下问题

export ‘Switch’ (imported as ‘Switch’) was not found in ‘react-router-dom’
export ‘Redirect’ (imported as ‘Redirect’) was not found in ‘react-router-dom’
解决方案：

• 方法1： 安装旧版本的react-router-dom, yarn add react-router-dom@5
• 方法2： 新版本中将所有 Switch 改为 Routes，Redirect 改为 Navigate

向React中添加路由

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import MainRouter from "./page/router";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<MainRouter />);

=============================================================================
import { HashRouter, Redirect, Route, Switch } from "react-router-dom";
import routerConfig from "./config";
import { getToken } from "../../utils/token";

const PrivateRoute = (props) => {
	const { routerConfig, location } = props;
	const { pathname } = location;
	const isLogin = JSON.parse(getToken()); // 判断是否登录
	const currentRoute = routerConfig.find((item) => item.path === pathname); // 找到路由对应的组件

	/* 这些if eles 部分可以省略，只是为了直观一点 */
	if (isLogin) {
		/* 已经登录，再次进登录页面，就让它跳转到首页 */
		if (pathname === "/login") {
			return <Redirect to={"/"} />;
		} else {
			if (currentRoute) {
				/* 登录成功后，访问非登录页面，路由匹配的上 */
				if (currentRoute.super && isLogin.level <= 0) {
					// 权限不够
					return <Redirect to={"/noPermission"} />;
				}
				return <Route path={pathname} component={currentRoute.component} />;
			} else {
				/* 路由匹配不上 */
				return <Redirect to={"/404"} />;
			}
		}
	} else {
		/* 非登录状态 */
		if (currentRoute) {
			if (currentRoute.auth) {
				/* 可以匹配到路由，但是访问这个页面需要登录 */
				return <Redirect to={"/login"} />;
			} else {
				/* 可以匹配到路由， 但是不需要登录， 就可以直接访问了 */
				return <Route path={pathname} component={currentRoute.component} />;
			}
		} else {
			/* 匹配不到路由， 直接跳转到404 */
			return <Redirect to={"/404"} />;
		}
	}
};

function MainRouter(props) {
	return (
		<div>
			<HashRouter>
				<Switch>
					<PrivateRoute routerConfig={routerConfig} />
					{/* {routerConfig.map(({ path, component: Component }) => {
						return <Route key={path} path={path} component={Component} />;
					})} */}
				</Switch>
			</HashRouter>
		</div>
	);
}
export default MainRouter;
=============================================================================
import Login from "../components/login";
import Book from "../components/book";
import User from "../components/user";
import NotPage from "../components/404";
import Home from "../components/home";
import NoPermission from "../components/noPermission";

const routerConfig = [
	{
		path: "/",
		component: Home,
		auth: true, // 需要被验证
	},
	{
		path: "/login",
		component: Login,
	},
	{
		path: "/book",
		component: Book,
		auth: true, // 需要被验证
	},
	{
		path: "/user",
		component: User,
		auth: true, // 需要被验证
		super: true,
	},
	{
		path: "/noPermission",
		component: NoPermission,
	},
	{
		path: "/404",
		component: NotPage,
	},
	{
		path: "*",
		component: NotPage,
	},
];

export default routerConfig;

登录逻辑

import React from "react";
import { setToken } from "../../utils/token";

function LoginComponent(props) {
	const { history } = props;
	return (
		<div>
			<h1>Login Page</h1>
			<button
				onClick={() => {
					const LoginInfo = {
						value: "chenjiang",
						level: 0, // 标志普通管理员
					};
					setToken(JSON.stringify(LoginInfo));
					history.push("/");
				}}
			>
				管理员登录
			</button>
			<button
				onClick={() => {
					const LoginInfo = {
						value: "chenjiang",
						level: 1, // 标志超级管理员
					};
					setToken(JSON.stringify(LoginInfo));
					history.push("/");
				}}
			>
				超级管理员登录
			</button>
		</div>
	);
}
export default LoginComponent;