Vue 拦截器原理和详细使用

article/2025/3/16 5:07:05

拦截器原理和作用

首先拦截器在src/utils/request.js 文件中，拦截器分为请求拦截器和响应拦截器。
页面中的每一个请求都会经过请求拦截和响应拦截，所以一般在这个文件进行操作。
这一文件一般引入axios，vuex，Message，router 和相关方法，基地址+拦截器。
请求拦截器：Token的主动处理给每一个请求添加请求头token 对请求异常抛出。
响应拦截器：简化axios默认加了一层的data Token被动处理对请求异常抛出。

最简化版本

// 导入axios
import axios from 'axios'// 基地址
const service = axios.create({baseURL: process.env.VUE_APP_BASE_API,// 5秒超时timeout: 10000
})// 请求拦截
request.interceptors.request.use(config => {return config},error => {return Promise.reject(error)}
)// 响应拦截
request.interceptors.response.use(res => {return res},// 响应错误的代码写这里error => {return Promise.reject(error)}
)// 暴露副本
export default service

下面是实际开发中使用

注意：

当我们使用axios时候，他会给我们默认加一层data。这样我们取数据的时候就会比较增加无效代码，所以我们可以在数据响应的时候判断，给他人为的去掉一层，如下面判断 return data ，这样就可以直接res.data.变量

还有一个是token 处理这里包含了主动处理：登录时候存一个时间，判断这个时间，超过就调用登出方法，提示信息，打回到登录页。被动处理：异常的时候判断一下，如果是和后端规定好的token过期状态码（比如401），就调用登出方法，提示信息，打回到登录页。

基地址最好不要写死写变量名，这样我们就可以通过改环境文件快速更改地址。

// 导入axios
import axios from 'axios'
// 导入提示信息
import { Message } from 'element-ui'
// 导入vuex
import store from '@/store'
// 导入路由
import router from '@/router'
// 导入获取时间和token的工具函数
import { getToken, getTokenTime } from '@/utils/auth'// 基地址
const service = axios.create({baseURL: process.env.VUE_APP_BASE_API,// 5秒超时timeout: 10000
})
// 请求拦截
// 添加一个service的请求拦截器
service.interceptors.request.use(async config => {// config就是本次发请求的信息// 判断有没有tokenif (store.state.user.token) {// token失效的主动处理// 获取一下记录token的时间let start = getTokenTime()// 获取一下当前时间let now = Date.now()// 算出时间差let hour = (now - start) / 1000 / 3600// 判断是否超过1小时if (hour >= 1) {// 代表token过期await store.dispatch('user/logout')Message.error('token已过期,请重新登录')router.push('/login')// return代表不往下执行，所以这个请求不会发送return}config.headers.Authorization = 'Bearer ' + getToken()config.headers['Bearer'] = getToken()// config.headers.tenantid =  getTenantId ()}// 发送请求return config},error => {return Promise.reject(error)}
)
// 响应拦截
service.interceptors.response.use(res => {// axios默认加了一层data// 这个res包括这个请求响应回来的所有信息// 所有的接口请求都会回到这里// 获取到本次请求得到的数据const data = res.data// 会帮所有的请求打印// console.log(data);// 判断本次请求是否成功if (data.code === 200 || data.code == 0) {// 如果响应成功，则正常给他返回数据return data} else {// 证明失败，我们需要让外面的catch被调用// 要让catch被调用，就要手动抛出一个错误，并把服务器返回的消息抛回去Message.warning(data.message || data.msg)return Promise.reject(data.message)}},async error => {// token失效的被动处理console.log(error)if (error.response.data.code === 401) {await store.dispatch('user/logout')Message.warning('登录状态过期，请重新登录！')router.push('/login')} else {return Promise.reject(error)}}// error => {//   return Promise.reject(error)// }
)
// 暴露副本
export default service

浏览器存取