react中关于token的两个场景
场景一在react项目中，路由跳转前需判定是否存在token，有则正常跳转，没有则去登录页面。
实现
这里使用的是localstorage存储token（也可以使用redux管理token）
// src\components\AuthRoute.js
// 封装高阶组件
// 有token正常跳转 无token去登录页
import { Navigate } from 'react-router-dom'
export function AuthRoute({ children }) {
const token = localStorage.getItem('userToken_key')
if (token) {
return <>{ children}</>
} else {
return <Navigate to={'/login'} replace />
}
}
// src\router\index.js
import Login from '../page/Login'
import Layout from '../page/Layout'
import { createBrowserRouter } from 'react-router-dom'
import { AuthRoute } from '../components/AuthRoute'
const router = createBrowserRouter([
{
path: '/login',
element:<Login/>
},
{
path: '/',
element:<AuthRoute><Layout/></AuthRoute>
}
])
export default router场景二
对于每个axios哀求，都必要在header添加上token数据。
实现
为实现上述场景，直接在axios的哀求拦截器中写如下代码：
//请求拦截器
instance.interceptors.request.use(
(config) => {
const token=localStorage.getItem('userToken_key')
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
return config
},
(err) => Promise.reject(err)
)留意：在axios拦截器中无法使用react中的hook(以use开头的函数被称为hook)，以是无法使用useSelector拿到store中的token数据。
如果本文对你有资助，盼望能得到你的点赞或收藏或关注，这是对我最好的鼓励；
如你有题目或迷惑，接待在批评区写下，必将积极解答；
如本文有误区，盼望你不吝见教，让我们共勉！
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金
页:
[1]