React路由鉴权组件的封装

最新推荐文章于 2023-03-31 11:17:15 发布

weixin_53270399

最新推荐文章于 2023-03-31 11:17:15 发布

阅读量184

点赞数

文章标签： react.js Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_53270399/article/details/129582861

版权

文章介绍了如何在React中创建一个授权路由组件，用于限制只有登录用户才能访问特定页面。通过检查localStorage中的token来判断用户状态，未登录时重定向至登录页，并传递原目标路径。登录成功后，根据location.state决定是返回上一页还是跳转到指定页面。

摘要由CSDN通过智能技术生成

一、使用场景

限制某个页面在登录的情况下访问

二、说明

在React路由中并没有提供该组件，需要手动封装，来实现登录访问控制（类似于Vue路由的导航路由守卫）

三、实现步骤

在components目录下，创建AuthRoute/index.js文件

判断token是否存在，即判断是否登录

登录时，自己渲染对应页面组件

未登录时，重定向到登录页面，并传入跳转前的路由信息

登录成功后，判断是否需要跳转到用户想要访问的页面（判断location.state是否有值）

如果不需要（没有值），则直接调用navigate（-1）返回上一页

如果需要，就跳转到location.state.pathname指定的页面，使用replace方法模式

四、代码实现

AuthRoute/index.js

import React from 'react'
import { Navigate, useLocation } from 'react-router-dom'

export default function AuthRoute({component}) {
    const location =useLocation()
    if(localStorage.getItem('token')){
        //已登录
         //如果有token，跳转该组件包裹的页面
         return <>{component}</>
    }else{
        //未登录
        //跳转去登录页面
        return <Navigate to="/login"
            state={location}
            />
    }
}

在路由表中配置routes/index.js

{
        path:'/rent',
        element:<AuthRoute component=<Rent/>></AuthRoute>
    },

 const navigate = useNavigate()
 const location=useLocation()

//登录成功后,判断是否需要跳转到用户想要访问的页面（判断location.state是否有值）
              if(location.state){
//如果需要，就跳转到location.state.pathname指定的页面,使用replace模式
                navigate(location.state.pathname,{ replace: true })
              }else{
//如果不需要（没有值），则直接调用navigate（-1）返回上一页
              navigate(-1)
              }