React-Router 路由守卫 路由鉴权

• 路由鉴权就是在访问页面时判断是否需要权限
• 路由守卫就是在该页面需要登录用户的情况下去判断是否登录

写一个高阶组件，其本质就是一个函数，用来判断是否有token，有token则正常进入目标页面。没有token就跳转到登录页。

在components文件夹下新建一个Auth.js的文件，里面写入判断token的逻辑：

// 导入重定向的路由模块
import { Navigate } from "react-router-dom"

// 获取本地token
let token = window.sessionStorage.getItem('token')

function Auth({children}){
    if(token){
        return <>{children}</> 
    }else{
        return <Navigate to="/Login" replace></Navigate>
    }
}

export {Auth}

然后在App.js里导入并使用：

// 导入路由鉴权组件
import { Auth } from "./components/Auth";

把需要鉴权的路由组件用Auth组件包裹，那么这个路由在没有token的情况下就会强制跳转到登录：

<Routes>
    <Route path="/" element={ <Auth> <Home /> </Auth> } ></Route>
</Routes>

通常情况下，除了注册和登录，其他的路由都是需要鉴权的。