浅谈Vue网络请求之interceptors实际应用

浅谈Vue网络请求之interceptors实际应用

项目背景

最近在项目开发中，遇到下面这样一个问题：

在进行铭感操作之前，每个请求需要携带token,但是token 有有效期，token 失效后需要换取新的token并继续请求。

需求分析

每个请求都需要携带 token ，所以我们可以使用 axios request 拦截器，在这里，我们给每个请求都加 token,这样就可以节省每个请求再一次次的复制粘贴代码。

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/rDcdlx-www-form-urlencoded'

}

}

if (config.url === 'refresh') {

config.headers = {

'refresh-token': sessionStorage.getItem('refresh_token'),

'Content-Type': 'application/x-www-form-urlencoded'

}

}

return config

},

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 => {

throw new Error('token刷新' + error)

})

}

return response

},

error => {

return Promise.reject(error)

}

)

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。