token过期后重新获取token机制

1、request.js文件

import axios from 'axios'
import lib from '@/utils/lib'
// 创建 axios 实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // api 的 base_url
  timeout: 10000
})
lib(service)
export default service

2、lib.js文件

import { Message } from 'element-ui'
import store from '@/store'
import { js2Java, deleteCookie } from '@/utils/tools'
import { osJs2Java } from '@/utils/os/tools'
import { removeToken } from '@/utils/auth'
import { refreshToken } from '@/api/security'
import request from '@/utils/request'
import osRequest from '@/utils/os/request'

let isRefreshing = true // 开关,防止重复请求

// A模式---刷新token的请求函数
async function refreshTokenRequst() {
  const ajaxData = {
    'accessToken': localStorage.getItem('token'),
    'refreshToken': localStorage.getItem('refreshToken'),
    'version': 'v1.0',
    'seq': 111111
  }

  const res = await refreshToken(ajaxData)
  if (res.data.result.code === '200') {
    const resData = res.data.body
    if (!resData) {
      return
    }
    const { accessToken, refreshToken } = resData
    store.dispatch('setToken', accessToken)
    store.dispatch('setFreshToken', refreshToken)
    localStorage.setItem('token', accessToken)
    localStorage.setItem('refreshToken', refreshToken)

    onAccessTokenFetched()
    isRefreshing = true
  } else {
    Message.error(res.data.result.message)
  }
}

/**
 * B模式---刷新token的请求函数
 * token失效 js2Java获取token
 * @param {*} ms 定时器时间
 * */
function timeout(ms) {
  return new Promise((resolve) => {
    const params = {
      method: 'getRegainOsToken'
    }
    var token = osJs2Java(params)
    if (token !== undefined) {
      if (typeof token !== Object) {
        token = JSON.parse(token)
      }
      setTimeout(resolve, ms, token)
    }
  })
}

/**
 * B模式---刷新token的请求函数
 * token失效 js2Java获取token
 * @param {*} ms 定时器时间
 * */
async function getOsToken4(ms) {
  const token = await timeout(ms)
  if (token) {
    store.dispatch('setToken', token.body.accessToken)
    localStorage.setItem('token', token.body.accessToken)

    onAccessTokenFetched()
    isRefreshing = true
  } else {
    Message.error('获取客户端返回token失败!')
  }
}

/**
 * 公共部分缓存失效请求
 * @param {*} response 缓存接口参数
 * @param {*} neighModel  小区模式
 */
function operatePubRequest(response, neighModel) {
  // 刷新token的函数,这需要添加一个开关,防止重复请求
  if (isRefreshing && neighModel === 2) {
    getOsToken4(1000)
  }
  if (isRefreshing && neighModel === 1) {
    refreshTokenRequst()
  }
  isRefreshing = false
  // 这个Promise函数很关键
  const retryOriginalRequest = new Promise((resolve) => {
    addSubscriber(() => {
      const tmpReqData = response.config.data
      const isFormData = Object.prototype.toString.call(tmpReqData) === '[object FormData]'
      if (response.config.baseURL.lastIndexOf('/res/aa') !== -1) {
        resolve(request(
          !isFormData ? tmpReqData && JSON.parse(tmpReqData).body
            // body有参数
            ? {
              url: response.config.url,
              method: response.config.method,
              data: JSON.parse(tmpReqData).body
            }
            // body无参数
            : {
              url: response.config.url,
              method: response.config.method
            }
            // FormData格式的图片上传
            : {
              url: response.config.url,
              method: response.config.method,
              data: tmpReqData
            }
        ))
      }
      if (response.config.baseURL.lastIndexOf('/res/os') !== -1) {
        resolve(osRequest(
          tmpReqData && JSON.parse(tmpReqData).body
            ? {
              url: response.config.url,
              method: response.config.method,
              data: JSON.parse(tmpReqData).body
            }
            : {
              url: response.config.url,
              method: response.config.method
            }
        ))
      }
    })
  })
  return retryOriginalRequest
}

// Promise函数集合
let subscribers = []
function onAccessTokenFetched() {
  subscribers.forEach((callback) => {
    callback()
  })
  subscribers = []
}

function addSubscriber(callback) {
  subscribers.push(callback)
}

// request.js公共部分内容
export default function lib(service) {
  // 请求拦截器
  service.interceptors.request.use(
    config => {
      const header = {
        appName: 'app',
        dateTime: new Date().getTime(),
        user: 'admin',
        language: 'ZH_CN',
        serviceName: 'getInfo',
        versionId: 'v0.1.1',
        token: store.getters.token,
        refreshToken: '111b59f3d40a3a9698071a88e3df11fb'
      }
      const cData = config.data
      const isObj = Object.prototype.toString.call(cData) === '[object Object]'
      const isFormData = Object.prototype.toString.call(cData) === '[object FormData]'
      const isArr = Object.prototype.toString.call(cData) === '[object Array]'
      if (isObj && !isArr) {
        config.data = {
          header: header,
          body: {
            ...cData
          }
        }
      } else if (isFormData) {
        // 不用操作
      } else {
        config.data = {
          header: header,
          body: cData
        }
      }
      // Do something before request is sent
      if (store.getters.token) {
        // 让每个请求携带token-- ['Authorization']为自定义key 请根据实际情况自行修改
        config.headers['Authorization'] = 'Bearer ' + store.getters.token 
        // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
        // config.headers['X-Token'] = getToken()
      }
      return config
    },
    error => {
      // Do something with request error
      Promise.reject(error)
    }
  )

  // 响应拦截器
  service.interceptors.response.use(
    response => {
      // 10001=访问令牌过期 重新获取token
      // 10002=刷新令牌过期  退出登陆
      // 10013=账号已在别处登陆 退出登陆
      if (response.data.result !== undefined && (response.data.result.code === '10002' || response.data.result.code === '10013')) {
        if (store.getters.neighModel === 2) {
          // B模式
          return operatePubRequest(response, store.getters.neighModel)
        } else {
          // A模式
          if (document.getElementsByClassName('el-message').length > 0) return
          Message.error(response.data.result.message)
          setTimeout(() => {
            const params = {
              method: 'winLogout'
            }
            js2Java(params)
            // 此时后端退出登陆接口报错误码,直接清除缓存,强制刷新退出登陆
            store.dispatch('setToken', '')
            store.dispatch('setFreshToken', '')
            store.dispatch('setNeighNo', '')
            // 清除小区号
            localStorage.removeItem('neighNo')
            localStorage.removeItem('token')
            localStorage.removeItem('refreshToken')
            localStorage.removeItem('neighModel')
            // 清除所有cookie
            deleteCookie()
            removeToken()
            location.reload()
            return Promise.reject('error')
          }, 1000)
        }
      } else if (response.data.result !== undefined && response.data.result.code === '10001') {
        if (store.getters.neighModel === 2) {
          // B模式
          return operatePubRequest(response, store.getters.neighModel)
        } else {
          // A模式
          return operatePubRequest(response, store.getters.neighModel)
        }
      } else {
        return response
      }
    },
    error => {
      if (error.message === 'Request failed with status code 503') {
        Message({
          message: '操作失败,请检查服务是否连接正常!',
          type: 'error',
          duration: 2 * 1000
        })
      } else if (error.message.toString().indexOf('Network Error') !== -1) {
        Message({
          message: '网络异常,请检查网络!',
          type: 'error',
          duration: 2 * 1000
        })
      } else {
        Message({
          message: error.message,
          type: 'error',
          duration: 2 * 1000
        })
      }
      return Promise.reject(error)
    }
  )
}

3、参考连接(https://segmentfault.com/a/1190000016946316)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,366评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,521评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,689评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,925评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,942评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,727评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,447评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,349评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,820评论 1 317
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,990评论 3 337
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,127评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,812评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,471评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,017评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,142评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,388评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,066评论 2 355

推荐阅读更多精彩内容

  • 学习笔记 原文地址:antDesignPro使用心得,快速开发必备。https://www.52pojie.cn/...
    kalshen阅读 44,680评论 8 85
  • Https请求 一、访问HTTPS站点 两种方法来模拟发送HTTP请求,访问HTTP站点。一种方式是通过java....
    Gothrow阅读 2,263评论 0 2
  • 经过对项目结构 / 开发方式 / 技术架构的研究,再次提出部分可以优化的点。 刚加入新公司之后,在学习来新公司的开...
    十甫寸君阅读 1,393评论 0 0
  • 引用:https://github.com/WangZhechao/expross 1.简介 这篇文章是分析exp...
    宫若石阅读 3,087评论 1 8
  • 本项目搭建适用于h5移动端的vue项目搭建,主体是基于vue-cli3脚手架,目的在于搭建个可用于快速启动项目的基...
    lulu_c阅读 1,765评论 2 30