vue框架axios请求拦截器添加token和lang

在Vue框架中，利用axios作为HTTP请求库时，可以设置全局的请求拦截器来统一处理每个请求前的操作，比如添加请求头（如token和语言信息）。以下是步骤：

首先，在项目中安装axios：
npm install axios
登录后复制

在Vue的main.js或axios配置文件中，引入axios并创建实例：
import axios from 'axios';

const service = axios.create({
baseURL: process.env.BASE_API, // API的base_url
headers: {
'Content-Type': 'application/json', // 默认请求头
},
});
登录后复制

接下来，创建一个全局的request interceptor，添加token和lang：
service.interceptors.request.use(
config => {
if (localStorage.getItem('token')) { // 检查是否有token
config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`; // 添加Authorization头
}
if (localStorage.getItem('lang')) { // 如果有lang设置
config.headers['Accept-Language'] = localStorage.getItem('lang');
}
return config;
},
error => Promise.reject(error)
);
登录后复制

这里我们假设localStorage.getItem('token')和localStorage.getItem('lang')能获取到实际的token和lang值，如果存储的是JSON格式，需要做相应的解析。

使用这个服务发送API请求：
export function fetchData(url) {
return service.get(url);
}
登录后复制