使用react-router-dom来实现登录鉴权

 使用 npm i react-router-dom 下载react-router-dom

import React from "react";

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

const Login = React.lazy(() => import('../views/Login'))

const Home = React.lazy(() => import('../views/Home'))
 

// 使用islogin的方法去判断是否登录了

const Islogin = (props) => {

    // 获取登录时所产生的token

    let token = JSON.parse(localStorage.getItem('token'))

    // 获取访问的路由

    let Sub = props.children.type

    if (token) {

        return <Sub></Sub>

    } else {

        alert('请先登录哦')

        return <Navigate to='/login'></Navigate>

    }

}

const route = createBrowserRouter([

     {

        path: "/home",

        element: <Islogin>

                            <Home />

                        </Islogin>

     },

    {

        path: "/login",

        element: <Login />

    }

])

export default route