路由配置, 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: ‘商品管理’ 这就是自定义的参数