vue3axios二次封装token的处理

### Vue 3 中 Axios 二次封装 Token 处理 为了在 Vue 3 应用程序中实现 Axios 的二次封装来处理 Token，可以创建一个专门用于 HTTP 请求的工具模块 `http.js` 或者类似的名称。此模块不仅负责初始化 Axios 实例还应设置默认请求头以及拦截器以便自动加入和刷新 Token。 #### 创建 Axios 工具类 ```javascript // 文件路径: src/utils/http.js import axios from 'axios'; import { ElMessage } from 'element-plus'; const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // api base_url timeout: 5000 // 请求超时时间 }); // 请求拦截器 service.interceptors.request.use( config => { // 在发送请求之前做些什么 const token = localStorage.getItem('token'); if (token) { config.headers['Authorization'] = `Bearer ${token}`; } return config; }, error => { // 对请求错误做些什么 Promise.reject(error); } ); // 响应拦截器 service.interceptors.response.use( response => { // 对响应数据做点什么 return response.data; }, async error => { let message = ''; switch (error.response.status) { case 401: message = '未授权，请重新登录'; break; case 403: message = '拒绝访问'; break; case 404: message = '请求地址出错'; break; case 500: message = '服务器内部错误'; break; default: message = '连接服务器失败'; } ElMessage.error(message); // 如果返回的状态码为401，则跳转至登录界面 if (error.response.status === 401 && !location.href.includes('/login')) { window.location.href = '/login'; } return Promise.reject(error); } ); export function getAxios(url, params = {}) { return service.get(url, {params}); } export function postAxios(url, data = {}, config = {}) { return service.post(url, data, {...config}); } ``` 上述代码展示了如何通过定义自定义的 Axios 实例来进行 API 调用，并且设置了两个重要的部分——请求前缀与响应后缀处理器[^1]。每当发起一个新的网络请求时都会先经过这些钩子函数；同样地，当接收到服务端回复之后也会触发相应的逻辑判断是否需要更新用户的认证状态或者其他操作。 对于 Token 的管理，可以在每次发出请求的时候检查本地存储中的 Token 是否存在并将其附加到 Authorization 字段下作为 Bearer 类型的身份验证凭证。如果遇到鉴权失败的情况（比如过期），则提示用户重新登陆或者执行其他必要的措施以维持会话的有效性[^2]。 此外，在实际项目开发过程中还可以考虑集成更多功能如加载指示符显示、取消重复请求等功能进一步优化用户体验和服务交互效率[^3]。