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

最新推荐文章于 2024-06-23 13:12:36 发布

一坨腿毛子

最新推荐文章于 2024-06-23 13:12:36 发布

阅读量506

点赞数 1

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

本文链接：https://blog.csdn.net/qq_38615466/article/details/129655828

版权

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

摘要由CSDN通过智能技术生成

我们在使用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