您现在的位置是:首页 >其他 >React之鉴权网站首页其他

React之鉴权

Miketutu 2023-06-30 20:00:02
简介React之鉴权

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,从而保留浏览历史记录
 

风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。