vue帶參請求,登入時效(防止重複登陸)

維他命~發表於2020-10-26

vue 專案實現請辭請求之前攜帶引數(token)

import axios from './network/baseRequest' //這裡給每次請求封裝
Vue.prototype.axios = axios
// // 傳送請求

axios.interceptors.request.use(
  config => {
   config.withCredentials = true // 允許攜帶token ,解決跨域產生的相關問題
   let token = sessionStorage.getItem('token')//從本地快取取出token值
   // 判斷是否存在token,如果存在的話,則每個http header都加上token
   if (token) {
    config.headers = {
     'token': token,
    }
   }
   if (config.url === 'refresh') {
    config.headers = {
     'refresh-token': sessionStorage.getItem('refresh_token'),
    }
   }
   return config
  },
  error => {
   return Promise.reject(error)
  }
 )

定時重新整理token實現登入時間限制 可在 response 攔截器實現(也可以在此處做重複登陸攔截)

 //在 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)
  }
 )

相關文章