React之鉴权_react登录鉴权-CSDN博客

本文链接：https://blog.csdn.net/Miketutu/article/details/130445515

文章介绍了在React中如何实现鉴权，通过创建Auth.jsx组件结合react-router-dom进行权限控制。当检测到token存在时显示相应组件，否则提示用户并跳转到登录页面。同时，提到了token验证的重要性，以及在验证失败时处理401状态码的情况。文章还对比了编程式和声明式路由跳转的区别和使用场景。

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

react不像Vue中有路由守卫，可以通过路由守卫来进行鉴权，所以react的鉴权需要创建一个鉴权组件，我们这里叫Auth.jsx

Auth.jsx组件需要导入的依赖包有

import React, { useEffect } from 'react'

导入封装的token变量

import { TOKEN_KEY } from '../utils/h5store'

导入获取token封装的函数

import { getToken } from '../utils/constant'

导入antdUI库的提示

import { message } from 'antd'

导入react-router中的路由跳转

import { Navigate,useNavigate} from 'react-router-dom'

导入axios

import $api from '../request/index'

1️⃣：创建鉴权组件后，我们需要在路由配置文件中，用鉴权组件将后台的组件包裹起来，这里后台的组件是Home.jsx

import withLoadable from "../hoc/withLoadable";
import Auth from "../components/Auth";
const Login = withLoadable(() => import('../views/Login/Login.jsx'))
const Home = withLoadable(() => import('../views/homePage/Home'))
const routes = [
    {
        path: '/login',
        element: <Login></Login>
    },
    {
        path: '/',
        element: <Auth><Home></Home></Auth>
    }
]
export default routes

2️⃣：将后台组件包裹起来后Auth.jsx组件中进行逻辑的判断

3️⃣:在Auth.jsx组件中，先对有无token进行判断，

- 如果有token则将Auth.jsx接收到的props中的children返回出去，这里的props是Home.jsx组件。但是先将home组件中的children结构出来

 if (getToken(TOKEN_KEY)) {
        return (
            <div>
                {children}
            </div>
        )
    } else {
        message.warning('还未登录，请先登录')
        return <Navigate to='/login'></Navigate>
    }

- 如果没有token，则提醒用户，并且跳转到登录页面

4️⃣：证明有无token往往是不够的，所以还需要token的判断，如果token不正确，后台则返回401，并且返回到登录页面

 // 验证token信息
    const getAdminbyToken = async () => {
        const result = await $api.login.vreifyAuth()
        if(result.code == 401){
            message.warning('身份已过期,请重新登录')
            nav('/login')
        }
    }

这里有个知识点：react路由跳转分为编程导航和声明式导航：

编程式路由跳转：

使用useNavigate钩子函数

import {useNavigate} from 'react-router-dom'

声明式路由跳转：

声明式导航自己主要用到的是react中的两个路由组件Link、NavLink

其中NavLink是可以进行一些属性的限定，比如点击时的样式

Navigate

Navigate是React RouterV6 中的一个新组件，他用于在代码中进行编程式导航，相比于传统的history.push(_)和history.replace(_)，Navigate更加易用和类型安全，并且可以与其他react组件更好的整合。

- Navigate使用语法：

import {Navigate} from 'react-router-dom'
function MyComponent(){
      编程式的跳转至/login路由
    return <Navigate to='/login'></Navigate>
}

- Navigate可以接收一些可选的参数

replace:是否进行替换式导航，默认为false

state:传递给目标路由的状态数据

redirect：是否进行重定向，默认为true，如果设置为false，则会对URL进行push而非replace，从而保留浏览历史记录