拦截器
这是一级标题
这是普通字体这是强调
// 请求拦截器
request.interceptors.request.use(
// 任何所有请求会经过这里
// config 是当前请求相关的配置信息对象
// config 是可以修改的
function (config) {
const user = JSON.parse(window.localStorage.getItem('user'))
// console.log('i am here')
// 如果有登录用户信息,则统一设置 token
if (user) {
config.headers.Authorization = `Bearer ${user.token}`
}
// 然后我们就可以在允许请求出去之前定制统一业务功能处理
// 例如:统一的设置 token
// 当这里 return config 之后请求在会真正的发出去
return config
},
// 请求失败,会经过这里
function (error) {
return Promise.reject(error)
}
)
// 响应拦截器
// Add a response interceptor
request.interceptors.response.use(function (response) {
// 所有响应码为 2xx 的响应都会进入这里
// response 是响应处理
// 注意:一定要把响应结果 return,否则真正发请求的位置拿不到数据
return response
}, function (error) {
const { status } = error.response
// 任何超出 2xx 的响应码都会进入这里
if (status === 401) {
// 跳转到登录页面
// 清除本地存储中的用户登录状态
window.localStorage.removeItem('user')
router.push('/login')
Message.error('登录状态无效,请重新登录')
} else if (status === 403) {
// token 未携带或已过期
Message({
type: 'warning',
message: '没有操作权限'
})
} else if (status === 400) {
// 客户端参数错误
Message.error('参数错误,请检查请求参数')
} else if (status >= 500) {
Message.error('服务端内部异常,请稍后重试')
}
return Promise.reject(error)
})
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了