vue axios 封装（二）

封装二：

http.js

import axios from 'axios'
import storeHelper from './localstorageHelper'
// 全局设置
const obj = storeHelper.getStorageObject()
if (obj && obj.tokenInfo) {
  // console.info("http.js", obj);
  axios.defaults.headers.common['Authorization'] = 'bearer ' + obj.tokenInfo.access_token
}
const apiRoot = process.env.BASE_API_OF_SYS_MANAGE // 配置API路径
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'
axios.defaults.baseURL = apiRoot

// 设置请求的次数
axios.defaults.retry = 2
// 设置请求的间隙(ms)
axios.defaults.retryDelay = 1000

// 拦截响应response，并做一些错误处理
axios.interceptors.response.use(function(response) {
  // 对响应数据的全局状态码处理
  const json = response.data
  if (json.state !== '1') {
    switch (json.state) {
      case '2':
        break
      case '3':
        break
      case '4':
        break
      case '5':
        break
      default:
        break
    }
    // this.$Message.warning(json.msg !== "" ? json.msg : json.state);
  }
  return response
}, function axiosRetryInterceptor(err) {
  if (err && err.response) {
    switch (err.response.status) {
      case 400:
        err.message = '请求错误'
        break
      case 401:
        err.message = '未授权，请登录'
        break
      case 403:
        err.message = '拒绝访问'
        break
      case 404:
        err.message = `请求地址出错: ${err.response.config.url}`
        break
      case 408:
        err.message = '请求超时'
        break
      case 500:
        err.message = '服务器内部错误'
        break
      case 501:
        err.message = '服务未实现'
        break
      case 502:
        err.message = '网关错误'
        break
      case 503:
        err.message = '服务不可用'
        break
      case 504:
        err.message = '网关超时'
        break
      case 505:
        err.message = 'HTTP版本不受支持'
        break
      default:
    }
    if (err.response.status === 401) {
      var config = err.config
      // If config does not exist or the retry option is not set, reject
      if (!config || !config.retry) return Promise.reject(err)
      // Set the variable for keeping track of the retry count
      config.__retryCount = config.__retryCount || 0
      // Check if we've maxed out the total number of retries
      if (config.__retryCount >= config.retry) {
        // Reject with the error
        return Promise.reject(err)
      }
      // Increase the retry count
      config.__retryCount += 1

      // Create new promise to handle exponential backoff
      var backoff = new Promise(function(resolve) {
        /* setTimeout(function () {
                    resolve();
                }, config.retryDelay || 1); */
        // 利用刷新Token代替间隔周期
        getToken(function(token) {
          if (token.access_token) {
            config.headers.Authorization = 'bearer ' + token.access_token;
          }
          resolve()
        })
      })
      // Return the promise in which recalls axios to retry the request
      return backoff.then(function() {
        return axios(config) // 返回的请求若正常还回到最初请求的响应
        // .then(function (response) {
        //     if (this.debug) console.log(response.data);
        //     if (this.debug) console.log(response.status);
        //     if (this.debug) console.log(response.statusText);
        //     if (this.debug) console.log(response.headers);
        //     if (this.debug) console.log(response.config);
        //     return Promise.resolve();
        // });
        // 开启另一请求，则会关闭当前拦截效果
        /* return getToken(function (token) {
                    if (token.access_token) {
                        config.headers.Authorization = "bearer " + token.access_token;
                    }
                    return axios(config)

                }); */
      })
    }
  }
  return Promise.reject(err)
})
/**
 * 请求Token
 * @param {*} callback 请求成功回调
 * @param {*} user token请求参数，登录信息
 */
function getToken(callback, user) {
  var srcwin = window.opener || window.parent
  srcwin.postMessage('SUBSYS.ADMIN|GetToken', '*')

  setTimeout(function() {
    if (callback) {
      const obj = storeHelper.getStorageObject()
      // console.log('wandan')
      // console.log(obj)
      if (obj && obj.tokenInfo) {
        axios.defaults.headers.common['Authorization'] = 'bearer ' + obj.tokenInfo.access_token
        return callback(obj.tokenInfo)
      }
    }
  }, 2000)
  return
  // ---------------------
}
axios.install = (Vue) => {
  Vue.prototype.$http = axios
  Vue.prototype.$getToken = getToken
  Vue.prototype.$mystore = storeHelper
}

/**
 * 封装post请求
 * @param url
 * @param data
 */
export function post(url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.post(url, data)
      .then(response => {
        resolve(response)
      }, err => {
        reject(err)
      })
  })
}

/**
 * 封装get请求
 * @param url
 * @param data
 */
export function get(url, data) {
  url += '?'
  var objKeys = Object.keys(data)
  for (var i = 0; i < objKeys.length; i++) {
    if (i < objKeys.length - 1) {
      url = url + objKeys[i] + '=' + data[objKeys[i]] + '&'
    } else {
      url = url + objKeys[i] + '=' + data[objKeys[i]]
    }
  }
  return new Promise((resolve, reject) => {
    axios.get(url)
      .then(response => {
        resolve(response)
      }, err => {
        reject(err)
      })
  })
}

/**
 * 封装delete请求
 * @param url
 * @param data
 */
export function del(url, data) {
  return new Promise((resolve, reject) => {
    axios.delete(url, data)
      .then(response => {
        resolve(response)
      }, err => {
        reject(err)
      })
  })
}

/**
 * 封装put请求
 * @param url
 * @param data
 */
export function put(url, data) {
  return new Promise((resolve, reject) => {
    axios.put(url, data)
      .then(response => {
        resolve(response)
      }, err => {
        reject(err)
      })
  })
}

 

localstorageHelper.js

const key = 'Admin-Token'

import {
  getToken,
  setToken,
  removeToken
} from '@/utils/auth' // 验权

function setStorageObject(_data) {
  // 存储，IE6~7 cookie 其他浏览器HTML5本地存储
  if (window.localStorage) {
    localStorage.setItem(key, JSON.stringify(_data))
    // console.log('设置本地token')
    setToken(_data.tokenInfo.access_token)
  } else {
    setToken(_data.tokenInfo.access_token)
  }
}

export default {
  /* data() {
      return this.data;
  } */
  // key: "CMP.WEB.DATA",
  /** 当前用户信息的全部存储对象 */
  data: {
    userInfo: {
      id: 0,
      username: '',
      openId: '',
      authInfo: {
        links: [],
        permissionInfo: {}
      }
    },
    tokenInfo: {
      access_token: '',
      expires_in: '2018-04-28T20:40:47.784363+08:00',
      token_type: 'Bearer'
    }
  },
  /**
   * 获取全部存储对象
   */
  getStorageObject() {
    const _data = window.localStorage ? localStorage.getItem(key) : getToken(key)
    if (_data) {
      this.data = JSON.parse(_data)
    } else {
      this.data = {}
    }
    // this.data = _data
    return this.data
  },
  /** 是否登录状态 */
  isLogin() {
    this.getStorageObject()
    if (!this.data || !this.data.userInfo || !this.data.userInfo.username) {
      return false
    } else {
      return true
    }
  },
  /** 是否注销状态 */
  isLogout() {
    this.getStorageObject()
    if (this.data.userInfo) {
      return false
    } else {
      return true
    }
  },
  /** 删除当前用户存储对象，用于注销 */
  removeStorageObject() {
    // 存储，IE6~7 cookie 其他浏览器HTML5本地存储
    if (window.localStorage) {
      window.localStorage.removeItem(key)
    } else {
      removeToken(key)
    }
  },
  /**
   * 设置token信息对象，需要先获取data.tokenInfo,再修改data.tokenInfo,最后再通过此方法更新
   * @param {JSON} _data tokenInfo
   */
  setTokenInfo(_data) {
    this.data.tokenInfo = _data
    setStorageObject(this.data)
  },
  /**
   * 设置用户信息对象，需要先获取data.userInfo,再修改data.userInfo,最后再通过此方法更新
   * @param {JSON} _data userInfo
   */
  setUserInfo(_data) {
    this.data.userInfo = _data
    setStorageObject(this.data)
  },
  /**
   * 设置用户信息对象，需要先获取data.userInfo,再修改data.userInfo,最后再通过此方法更新
   * @param {JSON} _data userInfo
   */
  setAllInfo(_data) {
    this.data = _data
    setStorageObject(this.data)
  }

}