axios 请求响应拦截器

⏹ .env.development

/*
	1. 在项目根目录中创建文件 .env.development
	2. 在该文件中添加环境变量 REACT_APP_URL（注意：环境变量约定REACT_APP 开头）,
	3. 设置 REACT_APP_URL=http://localhost:8080
	4. 重新启动脚手架，脚手架在运行的时候就会解析这个文件	
*/
REACT_APP_URL=http://localhost:8080

⏹ url.js

/*
   我们在.env.development中配置了项目的根url
   可以通过process.env.REACT_APP_URL来获取到
*/
export const BASE_URL = process.env.REACT_APP_URL

⏹ api.js

import axios from 'axios';
import { BASE_URL } from './url';

// 创建axios实例,在实例中指定项目的根URL
const API = axios.create({
	// 执行每次请求时,请求的根路径
    baseURL: BASE_URL
})

// 添加请求拦截器
API.interceptors.request.use(config => {

    // 从拦截器的配置对象中解构出url
    const { url } = config;

    /*
        以 /user 开头的路径都属于登录后才能访问的页面
        但是 /user/login 和 /user/registered 除外
    */
    if (url.startsWith('/user') 
    	&& !url.startsWith('/user/login') 
    	&& !url.startsWith('/user/registered')) {
    	
        // 将本地存储的token添加到请求头中
        config.headers.Authorization = localStorage.getItem('项目token名称')
    }

    return config;
})

// 添加响应拦截器
API.interceptors.response.use(response => {

    // 获取后端返回的状态码
    const { status } = response.data;
    
    if (status === 400) {
        // 说明token失效,直接移除token即可
        localStorage.removeItem('项目token名称')
    }

    return response;
})

// 将创建好的API导出
export { API }

⏹ 使用封装好的axios

import { API } from '../../utils/api'

/*
	因为我们配置了请求的根路径和请求拦截器
	所以不需要每一次请求都添加接口根路径和请求头
*/ 
const res = await API.get(`/后台路径接口`, {
    params: {
        // 参数对象
    }
});