vue請求封裝


import Vue from 'vue'
import axios from 'axios'
import router from '@/router'
import qs from 'qs'
import merge from 'lodash/merge'
import {clearLoginInfo, routeToLogin} from '@/utils'
import store from '@/store'

const http = axios.create({
  timeout: 1000 * 30,
  withCredentials: true,
  headers: {
    'Content-Type': 'application/json; charset=utf-8',
    'client': 'PC'
  }
})

const refreshTokenHttp = axios.create({
  timeout: 1000 * 30,
  withCredentials: true,
  headers: {
    'Content-Type': 'application/json; charset=utf-8',
    'client': 'PC',
  }
})

/**
 * 請求攔截
 */
http.interceptors.request.use(config => {
  config.headers['token'] = Vue.cookie.get('token') // 請求頭帶上token
  return config
}, error => {
  return Promise.reject(error)
})
/**
 * 響應攔截
 */
http.interceptors.response.use(async response => {
  if (response.data && response.data.code === 401) { // 401, token失效
    let refreshToken = Vue.cookie.get('refreshToken')
    if (refreshToken) {
      const refreshTokenResult = await refreshTokenHttp({
        url: http.adornUrl(`/sys/refresh-token`),
        method: "post",
        params: {
          'refreshToken': Vue.cookie.get('refreshToken')
        }
      })
      const refreshTokenData = refreshTokenResult.data
      const rememberPassword = Boolean(localStorage.getItem('rememberPassword'))
      const domainName = store.state.common.domainName
      const adminDomainName = store.state.common.adminDomainName

      if (refreshTokenData && refreshTokenData.code === 200) {
        let expireHours = 720 //默認為30天
        if(rememberPassword && rememberPassword === false){
          expireHours = 16
        }
        Vue.cookie.set("token", refreshTokenData.token,'8h');
        Vue.cookie.set("refreshToken", refreshTokenData.refreshToken,expireHours + 'h');

        // 將新的Token設置到axios的默認請求頭
        http.defaults.headers['token'] = refreshTokenData.token;

        // 將新的Token設置到重發的請求頭
        response.config.headers.token = refreshTokenData.token;

        // 請求重發
        const responseFn = await http.request(response.config)
        return responseFn;
      } else {
        clearLoginInfo()
        routeToLogin()
      }
    }else {
      clearLoginInfo()
      routeToLogin()
    }
  }
  return response
}, error => {
  return Promise.reject(error)
})

/**
 * 請求地址處理
 * @param {*} actionName action方法名稱
 */
http.adornUrl = (actionName) => {
  // 非生產環境 && 開啟代理, 接口前綴統一使用[/proxyApi/]前綴做代理攔截!
  return (process.env.NODE_ENV !== 'production' && process.env.OPEN_PROXY ? '/proxyApi/' : window.SITE_CONFIG.baseUrl) + actionName
}

/**
 * get請求參數處理
 * @param {*} params 參數對象
 * @param {*} openDefultParams 是否開啟默認參數?
 */
http.adornParams = (params = {}, openDefultParams = true) => {
  var defaults = {
    't': new Date().getTime()
  }
  return openDefultParams ? merge(defaults, params) : params
}

/**
 * post請求數據處理
 * @param {*} data 數據對象
 * @param {*} openDefultdata 是否開啟默認數據?
 * @param {*} contentType 數據格式
 *  json: 'application/json; charset=utf-8'
 *  form: 'application/x-www-form-urlencoded; charset=utf-8'
 */
http.adornData = (data = {}, openDefultdata = true, contentType = 'json') => {
  var defaults = {
    't': new Date().getTime()
  }
  data = openDefultdata ? merge(defaults, data) : data
  return contentType === 'json' ? JSON.stringify(data) : qs.stringify(data)
}

export default http
/**
 * 清除登錄信息
 */
export function clearLoginInfo () {
  Vue.cookie.delete('token')
  Vue.cookie.delete('refreshToken')
  store.commit('resetStore')
  router.options.isAddDynamicMenuRoutes = false
}
/***
 * 重定向到登錄頁面
 */
export function routeToLogin() {
  router.push({name: buildLoginPage()})
}
/***
 * 根據域名獲取登錄頁面
 */
export function buildLoginPage() {
  const domainName = store.state.common.domainName
  const adminDomainName = store.state.common.adminDomainName

  if (window.location.href.indexOf(domainName) != -1) {
    return 'OutletsedLogin'
  } else {
    return 'login-admin'
  }
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM