路由配置, AutnToken 組件作為權限、登錄管理

import { createBrowserRouter, Navigate } from 'react-router-dom';
import Layout from '@/layout/index';
import Login from '@/pages/login';
import Page404 from '@/pages/404';import AutnToken from '@/components/authToken';
import { lazy } from 'react';
import withLoading from "@/components/router/withLoading";
import product from './product';
let router1:any=[
{path: '/',element: <Navigate to="/home" replace />,},{path: '/',element: (<AutnToken><Layout /></AutnToken>),children: [{path: 'home',element: withLoading(lazy(() => import("@/pages/home"))),handle: {title: "首頁",},},...product,{path: 'userAdmin',element: withLoading(lazy(() => import("@/pages/user"))),children: [{path: 'userList',handle: {title: "用戶列表",},element:withLoading(lazy(() => import("@/pages/user/userList"))),},],},],},{path: '/login',element: withLoading(lazy(() => import("@/pages/login"))),},{path: '*',element: withLoading(lazy(() => import("@/pages/404"))),}
]
export const router = createBrowserRouter([...router1]);

main.tsx

import { Suspense } from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.scss'import { BrowserRouter, RouterProvider } from "react-router-dom";
// 添加如下import { Provider } from 'react-redux'
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import { ConfigProvider } from 'antd'
// type Locale = ConfigProviderProps['locale'];
import zhCN from 'antd/es/locale/zh_CN';  //引入中文包 
import { PersistGate } from 'redux-persist/integration/react'import {router} from "@/router/index"
import { storeData, persistor } from "@/store"
dayjs.locale('cn');
// 關閉嚴格模式
ReactDOM.createRoot(document.getElementById('root')!).render(<Provider store={storeData}><PersistGate loading={null} persistor={persistor}><ConfigProvider locale={zhCN}><RouterProvider router={router} /></ConfigProvider></PersistGate></Provider>
);

AutnToken

// components/authToken/index.tsx
import { Navigate, Outlet, useLocation, useMatches } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { RootState } from '@/store';
import { ReactNode } from 'react';
interface AutnTokenProps {children: ReactNode;
}
export default function AutnToken({ children }: AutnTokenProps) {const userData = useSelector((state: RootState) => state.getDataConfig);const { token } = userData;const location = useLocation();console.log(token,"判斷是否登錄，")if (!token && location.pathname !== '/login') {return <Navigate to="/login" replace />;}
//   判斷是否有權  ----
const matches = useMatches();
const metas = matches.map((match:any) => {console.log(match,"路由信息--")})return <>{children}</>;
}

handle {title: ‘商品管理’ 這就是自定義的參數