React 路由权限跳转 Token判断 路由控制 登录状态控制

封装路由组件

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

export function AutoRote({children}){

    const token =getToken()

    if(token){ //已经登录

        return <>{children}</>

    }else{  //未登录

        return <Navigate to={'/login'} replace ></Navigate>

    }
}




function getToken(){
    return '模拟token'
}

使用

import User from "../view/User";
import Login from "../view/Login";

import {createBrowserRouter} from "react-router-dom";
import Info from "../view/User/Info";
import NotFound from "../view/System/404";
import {AutoRote} from "../components/AuthRoute";

const router = createBrowserRouter([
    {
        path: "/",
        element: <Login></Login>, // 默认路由重定向到 /login
    },
    ,{
        path:'/login',
        element:<Login></Login>
},
    {   path:'/user',
        element:<User></User>,
        children:[
            {
                // path:'info',
                index:true,
                element: <AutoRote><Info></Info></AutoRote>
            }
        ]
    },{
        path:'*',
        element:<NotFound></NotFound>
    }
,])

export default router