項目背景

最近在項目開發中，遇到下面這樣一個問題：

在進行銘感操作之前，每個請求需要攜帶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/x-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) })

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。