React Router V6项目中的路由鉴权封装实践（Hooks）

原创

用户10321458

发布于 2023-12-03 20:03:55

9740

发布于 2023-12-03 20:03:55

文章被收录于专栏：前端框架开发学习前端框架开发学习

React Router V6项目中的路由鉴权封装实践（Hooks）

1. 前言

1.1 路由封装的好处

路由鉴权集中管理： 封装路由组件允许你集中管理路由鉴权逻辑。这意味着在一个地方处理用户是否有权限访问某个路由，而不是在每个页面或组件中重复相同的鉴权逻辑。这有助于保持一致性，并简化了对路由鉴权的维护和更新。
提高代码复用性： 封装路由组件可以促进代码的复用。你可以将通用的路由配置、鉴权逻辑或其他功能抽象为可复用的组件，以便在整个应用程序中多次使用。这降低了重复编写相似代码的需求，提高了代码复用性。
易于扩展： 当项目需求变化时，封装的路由组件使得扩展和调整路由配置变得更加容易。你可以轻松地添加新的路由或更改现有路由的配置，而不会影响到整个应用程序的其他部分。
更清晰的项目结构： 路由组件的再封装可以帮助建立清晰的项目结构。通过将路由相关的代码放在专用的文件或文件夹中，项目的结构更容易理解和导航，减少了代码文件的混杂性。

1.2 整体项目结构

?- src
? ?- layout
? ? ? ?- index.ts ?# UI主框架（鉴权之后才能进的）
? ?- tools
? ? ? ?- auth.ts ? # 权限相关工具文件
? ?- router
? ? ? ?- router.tsx ?# 路由组件注册
? ? ? ?- routerMap.tsx ?# 路由表构建
? ? ? ?- privateRouter.ts ?# 权限路由组件
? ? ? ?- router.ts ?# 路由组件注册
? ?- pages #（下面都是随便弄的，要对自己的需求）
? ? ? ?- community.tsx ?# 社区压面
? ? ? ?- login.tsx ?# 登录界面
? ? ? ?- user.ts ?# 用户界面
? ? ? ?- book.ts ?# 书籍列表界面

2. 前期准备工作

2.1 安装依赖

??pnpm add antd --save # 因为是一个小案例，所以做了基础的UI开发
??pnpm add react-router-dom --save #（现在默认是V6版本的路由）

2.2 编写工具文件

?/**
? * 设置token
? * @param token
? * @returns
? */
?export const setToken = (token: string) =>
?    window.localStorage.setItem("auth_token", token);
?/**
? * 获取token
? * @returns
? */
?export const getToken = () => window.localStorage.getItem("auth_token");
?/**
? * 获取token
? * @returns
? */
?export const clearToken = () => window.localStorage.removeItem("auth_token");
?

2.3 编写具体页面组件

仅仅以社区列表这个组件为例，其实就是每个具体页面准备好

?import React from "react";
?
?export default function Community() {
?    return <div>社区列表界面</div>;
?}
?

3. 路由组件的开发

3.1 配置项目路由的根组件

?import React from "react";
?import ReactDOM from "react-dom/client";
?import App from "./App.tsx";
?import { BrowserRouter } from "react-router-dom";
?
?ReactDOM.createRoot(document.getElementById("root")!).render(
?    <React.StrictMode>
?        <BrowserRouter>
?            <App />
?        </BrowserRouter>
?    </React.StrictMode>
? ? ?//这里配置的是BrowserRouter，根据需要，可选择这个或者HashRouter，两者差别这里就略过了，可以看看router v6基础篇或其他文章
?);
?

3.2 守卫路由的编写

其实就是做了一个基本的鉴权与过期处理，自己项目如果有更多的需求，就在try里面加就可以了

?import { message } from "antd";
?import { ReactElement, useEffect } from "react";
?import { getToken } from "../tools/auth";
?import { useNavigate } from "react-router-dom";
?
?interface Props {
?    children: ReactElement;
?}
?const PrivateRoute = ({ children }: Props) => {
?    const navigator = useNavigate();
?
?    // 对比时间戳是否超过48小时
?    function isPast48Hours(timestamp: number): boolean {
?        // 获取当前时间戳
?        const currentTimestamp = Math.floor(Date.now() / 1000);
?
?        // 计算时间差，单位为秒
?        const timeDifference = currentTimestamp - timestamp;
?
?        // 定义48小时的秒数
?        const hours48InSeconds = 48 * 60 * 60;
?
?        // 判断时间差是否超过48小时
?        return timeDifference > hours48InSeconds;
?    }
?
?    useEffect(() => {
?        try {
?            const token: any = getToken();
?            const tokenObj = JSON.parse(token);
?            if (tokenObj === null || isPast48Hours(tokenObj.expired)) {
?                message.warning("token过期,请重新登录");
?                navigator(`/login`);
?            }
?        } catch (error) {
?            message.warning("token过期,请重新登录");
?            navigator(`/login`);
?        }
?    }, []);
?    return <>{children}</>;
?};
?
?export default PrivateRoute;
?

3.3 路由映射表的编写

这里没有直接用<Route/>组件爱你包裹，而是先用js对象形式维护了一套路由表数据，方便其他诸如: 菜单/目录等组件的复用

?import { Navigate } from "react-router-dom";
?import Login from "../pages/login";
?import User from "../pages/User";
?import Community from "../pages/Community";
?import Book from "../pages/Book";
?import Layout from "../layout";
?import PrivateRoute from "./privateRoute";
?export const routerMap = [
?    {
?        path: "/login",
?        element: <Login />,
?    },
?    {
?        path: "/",
?        element: (
?            <PrivateRoute>
?                <Layout />
?            </PrivateRoute>
?        ),
?        children: [
?            {
?                path: "/user",
?                element: <User />,
?            },
?            {
?                path: "/community",
?                element: <Community />,
?            },
?            {
?                path: "/book",
?                element: <Book />,
?            },
?        ],
?    },
?    {
?        path: "*",
?        element: <Navigate to="/login" />,
?    }, //其他没有被注册过的路径统一重定位到login
?];
?

3.4 路由注册的编写

其实就是将原先的路由表数据注册为路由组件

?
?import { useRoutes } from "react-router-dom";
?import { routerMap } from "./routerMap";
?
?function Router() {
?    const routerTab = useRoutes(routerMap); //注册前端路由表
?
?    return <div>{routerTab}</div>;
?}
?
?export default Router;
?

3.5 路由渲染

?import Router from "./router/router";
?
?function App() {
?    return (
?        <>
?            <Router />
?        </>
?    );
?}
?
?export default App;
?

4. 组件内应用

4.1 Layout组件应用测试

Layout布局组件，一个简单的小Demo来测试路由正确性，他会被权限组件<PrivateRoute/>包裹,受到保护

?import { Tabs, TabsProps } from "antd";
?import React from "react";
?import { Outlet, useNavigate } from "react-router-dom";
?import { clearToken } from "../tools/auth";
?export default function Layout() {
?    const navigator = useNavigate();
?    const items: TabsProps["items"] = [
?        {
?            key: "book",
?            label: "书籍列表页面",
?        },
?        {
?            key: "community",
?            label: "社区列表页面",
?        },
?        {
?            key: "user",
?            label: "用户列表页面",
?        },
?        {
?            key: "login",
?            label: "退出登录",
?        },
?    ];
?    const handleChangeRoute = (value: string) => {
?        if (value === "login") {
?            clearToken();
?        }
?        navigator(`/${value}`);
?    };
?    return (
?        <>
?            <div style={{ maxWidth: "500px", margin: "0 auto" }}>
?                <div
?                    style={{
?                        display: "flex",
?                        alignItems: "center",
?                        justifyContent: "center",
?                    }}
?                >
?                    <Tabs
?                        defaultActiveKey="community"
?                        size={"large"}
?                        items={items}
?                        onChange={(value) => {
?                            handleChangeRoute(value);
?                        }}
?                    />
?                </div>
?                <div
?                    style={{
?                        marginTop: "50px",
?                        display: "flex",
?                        alignItems: "center",
?                        justifyContent: "center",
?                    }}
?                >
?                    <Outlet />
?                </div>
?            </div>
?        </>
?    );
?}
?

4.2 登录组件的应用测试

Login登录组件，一个简单的小Demo来测试路由正确性，他不会被权限组件<PrivateRoute/>包裹,可以随意进入

?import { Button } from "antd";
?import React from "react";
?import { setToken } from "../../tools/auth";
?import { useNavigate } from "react-router-dom";
?
?export default function Login() {
?    const navigator = useNavigate();
?    const handleLogin = () => {
?        const preToken: object = {
?            token: "hjsdbvfjhysebfjkd762354",
?            expired: Date.now(),
?        };
?        console.log(JSON.stringify(preToken));
?
?        setToken(JSON.stringify(preToken)); //模拟设置token
?        navigator(`/`);
?    };
?
?    const handleRush = () => {
?        navigator(`/`); //模拟强行进入主页
?    };
?    return (
?        <div
?            style={{
?                marginTop: "30px",
?                display: "flex",
?                alignItems: "center",
?                justifyContent: "center",
?            }}
?        >
?            <Button
?                type={"primary"}
?                onClick={() => {
?                    handleLogin();
?                }}
?                style={{ marginRight: "15px" }}
?            >
?                登录进入系统主页
?            </Button>
?            <Button
?                type={"primary"}
?                onClick={() => {
?                    handleRush();
?                }}
?            >
?                强行进入系统主页
?            </Button>
?        </div>
?    );
?}
?