react实现一个拦截器，使请求自动携带jwt

最新推荐文章于 2025-01-07 09:14:52 发布

一坨腿毛子

最新推荐文章于 2025-01-07 09:14:52 发布

阅读量593

点赞数 1

分类专栏： React学习文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_38615466/article/details/129655828

版权

本文介绍了如何在React应用中使用Axios库和JWT-decode库创建一个请求拦截器，以自动在每次请求中添加JWT令牌。首先，安装所需库，然后创建Axios实例并设置默认请求头。当用户登录成功后，JWT被存储在本地存储中。在需要发送请求的组件中，利用这个Axios实例，请求会自动带上JWT，简化了手动设置请求头的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们在使用jwt的时候往往要配合拦截器的使用，否则每次请求都要我们手动设置请求头会大大降低效率。通过封装Axios创建一个Axios实例，并设置默认的请求头和拦截器。

1、安装 Axios 库和 JWT-decode 库。

npm install axios jwt-decode

2、创建一个 Axios 实例，并设置默认的请求头和拦截器。

import axios from 'axios';
import jwt_decode from 'jwt-decode';

const axiosInstance = axios.create({
   
  baseURL: 'https://api.example.com',
  headers: {
   
    'Content-Type': 'application/json',
  }
});

axiosInstance.interceptors.request.use(
  config => {
   
    const token = localStorage.getItem('token');
    if