axios 网络请求 interceptors 拦截器

发布于 2022-11-23 23:19:05 字数 1918 浏览 6 评论 0

最近在项目开发中,遇到下面这样一个问题,在进行敏感操作之前,每个请求需要携带 token,但是 token 有有效期,token 失效后需要换取新的 token 并继续请求。

需求分析

  1. 每个请求都需要携带 token ,所以我们可以使用 axios request 拦截器,在这里,我们给每个请求都加 token,这样就可以节省每个请求再一次次的复制粘贴代码。
  2. token 失效问题,当我们token 失效,我们服务端会返回一个特定的错误表示,比如 token invalid,但是我们不能在每个请求之后去做刷新 token 的操作呀,所以这里我们就用 axios response 拦截器,我们统一处理所有请求成功之后响应过来的数据,然后对特殊数据进行处理,其他的正常分发。

功能实现

分析完问题后,我们来实现功能

安装 axios,这里我们就赘述怎么安装 axios,在 main.js 注册 axios

Vue.use(Vuex)
Vue.use(VueAxios, axios)
Vue.use(qs)

注:qs,使用 axios,必须得安装 qs,所有的 Post 请求,我们都需要 qs 对参数进行序列化。

request 拦截器实现

axios.interceptors.request.use(
config => {
config.baseURL = '/api/'config.withCredentials = true // 允许携带 token ,这个是解决跨域产生的相关问题
config.timeout = 2500
let token = sessionStorage.getItem('access_token')
let csrf = store.getters.csrf
if (token) {
config.headers = {
'access-token': token,
'Content-Type': 'application/x-www-form-urlencoded'
}
}
if (config.url === 'refresh') {
config.headers = {
'refresh-token': sessionStorage.getItem('refresh_token'),
'Content-Type': 'application/x-www-form-urlencoded'
}
}
returnconfig
},
error => {
return Promise.reject(error)
}
)

response 拦截器实现

axios.interceptors.response.use(
response => {
// 定时刷新 access-token
if (!response.data.value && response.data.data.message === 'token invalid') {
// 刷新 token
store.dispatch('refresh').then(response => {
sessionStorage.setItem('access_token', response.data)
}).catch(error => {
thrownewError('token 刷新' + error)
})
}
return response
},
error => {
returnPromise.reject(error)
}
)

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

0 文章
0 评论
0 人气
更多

推荐作者

深爱成瘾

文章 0 评论 0

甜点

文章 0 评论 0

Ss Yy

文章 0 评论 0

dgmis009

文章 0 评论 0

花想c

文章 0 评论 0

樱花落人离去

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。