react中关于token的两个场景

场景一

在react项目中，路由跳转前需判定是否存在token，有则正常跳转，没有则去登录页面。
实现

这里使用的是localstorage存储token（也可以使用redux管理token）

2. // src\components\AuthRoute.js
3. // 封装高阶组件
4. // 有token正常跳转 无token去登录页
5. import { Navigate } from 'react-router-dom'
7. export function AuthRoute({ children }) {
8.     const token = localStorage.getItem('userToken_key')
9.     if (token) {
10.         return <>{ children}</>
11.     } else {
12.         return <Navigate to={'/login'} replace />
13.     }
14. }

复制代码

2. // src\router\index.js
3. import Login from '../page/Login'
4. import Layout from '../page/Layout'
6. import { createBrowserRouter } from 'react-router-dom'
7. import { AuthRoute } from '../components/AuthRoute'
9. const router = createBrowserRouter([
10.     {
11.         path: '/login',
12.         element:<Login/>
13.     },
14.     {
15.         path: '/',
16.         element:<AuthRoute><Layout/></AuthRoute>
17.     }
18. ])
20. export default router

复制代码

场景二

对于每个axios哀求，都必要在header添加上token数据。
实现

为实现上述场景，直接在axios的哀求拦截器中写如下代码：

2. //请求拦截器
3. instance.interceptors.request.use(
4.   (config) => {
5.     const token=localStorage.getItem('userToken_key')
6.     if (token) {
7.       config.headers.Authorization = `Bearer ${token}`
8.     }
9.     return config
10.   },
11.   (err) => Promise.reject(err)
12. )

复制代码

留意：在axios拦截器中无法使用react中的hook(以use开头的函数被称为hook)，以是无法使用useSelector拿到store中的token数据。

如果本文对你有资助，盼望能得到你的点赞或收藏或关注，这是对我最好的鼓励；
如你有题目或迷惑，接待在批评区写下，必将积极解答；
如本文有误区，盼望你不吝见教，让我们共勉！