react路由v6登录拦截

1：router文件夹下创建一个AuthRouter.js文件

代码如下：

// 路由守卫
// 判断token是否存在，如果存在跳转页面，不存在返回登录页面
import { Navigate } from 'react-router-dom'

const getToken = () => {
    return sessionStorage.getItem("token")
}

function AuthRouter({children}){
    // 获取token
    const token = getToken()
    // 判断token是否存在
    if(token){
        console.log(children);
        return <>{children}</>
    }else{
        return <Navigate to={'/login'}></Navigate>
    }
}

export { AuthRouter }

router文件夹路由表文件里配置：

操作1：引入AuthRouter组件

用AuthRouter组件包裹需要做登录拦截的组件

import { Navigate, createBrowserRouter as createRouter } from "react-router-dom";
import App from '../App'
import Index from '../pages/Index'
import Tuo from '../pages/Body(1)'
import Login from '../pages/Login'
//做登录拦截
import { AuthRouter } from "./AuthRouter";
const router=createRouter([
    {
        path:'/',
        element:<Navigate to="/login"/>
    },
    {
        path:'/app',
        element:<AuthRouter><App/></AuthRouter>,
        children:[
            {
                path:'index',
                element:<Index/>
            },
            {
                path:'tuo',
                element:<Tuo/>
            }
        ]
    },
    {
        path:'/login',
        element:<Login/>
    }
])
export default router