您现在的位置是:首页 >其他 >React之鉴权网站首页其他
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是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,从而保留浏览历史记录