vue使用axios实现拦截器

一、使用Pinia存储token

参考文章：vue使用Pinia实现不同页面共享token

二、安装axios拦截器

npm install axios

三、编写工具实现请求拦截和响应拦截

utils/request.js

//定制请求的实例//导入axios  npm install axios
import axios from 'axios';
import { ElMessage } from 'element-plus';
//定义一个变量,记录公共的前缀  ,  baseURL
const baseURL = '/api';
const instance = axios.create({baseURL})//导入token状态
import { useTokenStore } from '@/stores/token.js';
//添加请求拦截器
instance.interceptors.request.use((config)=>{//在发送请求之前做什么let tokenStore = useTokenStore()//如果token中有值，再携带if(tokenStore.token){config.headers.Authorization=tokenStore.token}return config},(err)=>{//如果请求错误做什么return Promise.reject(err);//异步的状态转化成失败的状态}
)import router from '@/router'//添加响应拦截器
instance.interceptors.response.use(result=>{//判断业务状态码if(result.data.code==0){return result.data;}ElMessage.error(result.data.msg ? result.data.msg : '服务异常');//异步操作转成失败的状态return Promise.reject(result.data);},err=>{//如果响应状态码时401，代表未登录，给出对应的提示，并跳转到登录页if(err.response.status===401){ElMessage.error('请先登录！')router.push('/login')}else{ElMessage.error('服务异常');}return Promise.reject(err);//异步的状态转化成失败的状态}
)export default instance;

四、API 接口中使用拦截器

src/api/article.js

//导入请求工具类
import request from '@/utils/request.js'
//导入@/stores/token.js
import { useTokenStore } from '@/stores/token'//文章分类列表查询
export const articleCategoryListService = () => {return request.get('/category')
}