路由鉴权
详细解析
- 判断token是否存在
- 如果存在 直接正常渲染
- 如果不存在 重定向到登录路由
import { Navigate } from "react-router-dom"; // 高阶组件:把一个组件当成另外一个组件的参数传入 然后通过一定的判断 返回新的组件 // 这里的AuthRoute就是一个高阶组件 function AuthRoute({ children }) { // 获取token const tokenStr = JSON.parse(sessionStorage.getItem('user')) // 如果token存在 直接正常渲染 if (tokenStr) { return <>{children}</> } // 如果token不存在，重定向到登录路由 else { return <Navigate to='/login' /> } } {/* <AuthRoute> <Layout /> </AuthRoute> 登录：<> <Layout /> </> 非登录：<Navigate to="/login" replace /> */ } export default AuthRoute
简单易懂~
1.对于本地sessionStorage或者localStorage保存的值进行判断
2. 根据后端传递的token值进行判断
import { Navigate } from "react-router-dom"; function AuthRoute({ children }) { // 拿取后端token或者localStorage、sessionStorage的值 let abc = JSON.parse(sessionStorage.getItem('user')) if (abc) { return <>{children}</> } else { return <Navigate to='/login' /> } } export default AuthRoute
