路由守卫高阶组件，react-router v6

import { Navigate } from "react-router-dom"
import tool from "./tool"
// 高阶组件:把一个组件当成另外一个组件的参数传入 然后通过一定的判断 返回新的组件
 
function AuthRouter({ children }) {
 
    let isToken = tool.cookie.get('TOKEN')
   // 判断有没有token
    if (isToken) {
        //token存在正常渲染
        return <>{children}</>
    } else {
    // token不存在，重定向到登录路由
        return <Navigate to='/login' replace></Navigate>
    }
 
 
}
 
export default AuthRouter

1.实现思路：自己封装一个AuthRouter高阶组件，实现未登录拦截，并跳转到登录页面。

判断本地有无token，有token就返回子组件，否则就重定向到 login。

1.在utils文件夹中创建AuthRouter/AuthRouter.js，文件。

2.判断有没有token

3.登录时重新渲染组件

4.未登录，重定向login

5.将需要鉴权的路由组件 用AuthRouter包裹渲染。
 路由表：
import { lazy } from "react";
import { Navigate } from "react-router-dom";
import AuthRouter from "../utils/authRouter";
 
const Login = lazy(() => import('../pages/login'))
const Home = lazy(() => import('../pages/home'))
 
// import Home from '../pages/home'
// import Login from '../pages/login'
 
export const routers = [
    // 需要鉴权的组件home
    {
        path: '/home',
        element: <AuthRouter> <Home /> </AuthRouter>,
        name: '首页'
    },
    {
        path: '/login',
        element: <Login />,
        name: '登录'
    },
    {
        path: '/',
        element: <AuthRouter> <Home /> </AuthRouter>
 
    },
]