React 配置Router (v6) 路由鉴权处理权限判断

首先在index.tsx配置Router

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import './index.css';
import {RouterProvider} from "react-router-dom";
import routes from "./router/Routes";

const root = ReactDOM.createRoot(
    document.getElementById('root') as HTMLElement
);
root.render(
    <>
        <RouterProvider router={routes}/>
    </>
);

reportWebVitals();

在 router 文件夹下添加两个文件 AuthComponent.tsx 和 Routes.tsx

AuthComponent.tsx 用来包装路由的页面，让页面在请求之前先进行权限判断

import {Navigate} from "react-router-dom";

interface Props {
    children: React.ReactElement;
}

export const AuthComponent = ({children}: Props) => {

    // 检查权限是否通过的逻辑
    const id = localStorage.getItem("id");
    const token = localStorage.getItem("token");
    if (id === null || token === null) {
        // 检查失败, 跳转登录页
        return <Navigate to="/login"></Navigate>
    }

    // 检查成功, 展示内容
    return <>{children}</>
}

Routes.tsx 用来配置路由信息

import {createBrowserRouter} from "react-router-dom";
import IndexPage from "../pages/IndexPage";
import LoginPage from "../pages/LoginPage";
import {AuthComponent} from "./AuthComponent";

const routes = createBrowserRouter([
    {
        path: "/",
        element: <AuthComponent><IndexPage/></AuthComponent>, // 用AuthComponent包裹, 需要登录才能访问该页面
    },
    {
        path: "/login",
        element: <LoginPage/> // 无任何包裹, 可以直接访问
    },
])

export default routes

打开浏览器测试

// 首页 需要登录成功 并且在 localStorage 中写入id和token才能访问
http://localhost:3000/
 
// 登陆页 不需要权限判断即可访问
http://localhost:3000/login