移动端不定期更新token方案

binta 发布于2019-08-26 10:59 / 2213人阅读

摘要：客户端需要不定期更新，同时得保证在发送更新同时其他网络请求挂起，否则会报失效。待新回来之后，重新发起挂起的请求。

客户端需要不定期更新token，同时得保证在发送更新token同时其他网络请求挂起，否则会报token失效。待新token回来之后，重新发起挂起的请求。

应服务端要求，更新token请求时，老token立刻失效

模拟网络请求封装（模拟）

使用演示

结果打印

小结

模拟网络请求封装（模拟）

let token = 1 当前请求使用的token
let refreshToken = false // 是否处于更新token中
let subscribers = []; // 挂起的请求数组

/**
 * 网络请求入口
 */
function callApi (data, time = 1000) {
  console.log("0000callApi=== type:" + data.type + "  token:" + token)
  if (refreshToken) {
    const retryOriginalRequest = new Promise((resolve) => {
                addSubscriber(()=> {
                    resolve(request(time, data.type))
                })
            });
            return retryOriginalRequest;
  }
  // 判断是否是执行更新token
  if (data && (data.type == "refreshToken")) {
     const newData = request(time, data.type)
     refreshToken = true
     return newData
  }
  return request(time, data.type)
}

/**
 * 执行网络请求
 */
function request(ms, type) {
  console.log("1111request=== type:" + type + "  token:" + token)
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms, type);
  });
}

/**
 * token更新后，重新发起挂起的请求
 */
function onAccessTokenFetched() {
    subscribers.forEach((callback)=>{
        console.log("重新请求")
        callback();
    })
    refreshToken = false
    subscribers = [];
}

/**
 * push挂起的请求
 * @param callback 挂起的请求
 */
function addSubscriber(callback) {
    subscribers.push(callback)
}

使用演示：

// before
callApi({type: "first", token}, 1000).then(consoleResponse)

// Todo
callApi({type: "refreshToken", token}, 2000).then((v) => {
  token = 2
  onAccessTokenFetched()
  consoleResponse(v)
})

// doing
callApi({type: "second", token}, 2000).then(consoleResponse)
callApi({type: "third", token}, 2000).then(consoleResponse)
callApi({type: "four", token}, 2000).then(consoleResponse)
callApi({type: "five", token}, 2000).then(consoleResponse)

// after
setTimeout(() => callApi({type: "six", token}, 2000).then(consoleResponse), 5000)


function consoleResponse (v) {
  console.log("2222response===type:" + v + " token:" + token)
}

结果打印

"0000callApi=== type:first  token:1"
"1111request=== type:first  token:1"
"0000callApi=== type:refreshToken  token:1"
"1111request=== type:refreshToken  token:1"
"0000callApi=== type:second  token:1"
"0000callApi=== type:third  token:1"
"0000callApi=== type:four  token:1"
"0000callApi=== type:five  token:1"
"2222response===type:first token:1"
"重新请求"
"1111request=== type:second  token:2"
"重新请求"
"1111request=== type:third  token:2"
"重新请求"
"1111request=== type:four  token:2"
"重新请求"
"1111request=== type:five  token:2"
"2222response===type:refreshToken token:2"
"2222response===type:second token:2"
"2222response===type:third token:2"
"2222response===type:four token:2"
"2222response===type:five token:2"
"0000callApi=== type:six  token:2"
"1111request=== type:six  token:2"
"2222response===type:six token:2"

小结

本案例主要是模拟流程，算是对这次改造封装网络请求的思路，不对地方各位大神多多指点

真正用于网络请求的过程中，需要对请求超时和请求出错的处理，超时和出错都需要重置更新token标识，重起发起挂起的网络请求

云服务器 GPU云服务器移动端适配方案移动热更新云更新2003服务器端移动端

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106936.html

API网关设计（一）之Token多平台身份认证方案

摘要：网关设计一之多平台身份认证方案随着的发展现如今早已不是当年的登陆单一模式，而不久的到来又会带来无人车等其他设备的接入。所以为了应对将来的时代的变化，一个好的多平台认证登陆方案是切实所需。 API网关设计（一）之Token多平台身份认证方案随着4g的发展现如今早已不是当年的web登陆单一模式，而不久5g的到来又会带来无人车等其他设备的接入。所以为了应对将来的时代的变化，一个好的多平台认...

leon 2019-08-16 15:50 评论0 收藏0
优秀博文收藏（不定期更新）

摘要：我的书签我的书签谨慎导入，小心覆盖工具类版本管理快速切换源配置教程指南可视化工具前端工具集前端助手网络封包截取工具格式化工具标注工具模拟请求类深入浅出布局你所不知道的动画技巧与细节常用代码黑魔法小技巧，让你少写不必要的，代码更优雅一劳永我的书签我的书签（谨慎导入，小心覆盖）工具类 nvm: node版本管理 nrm: 快速切换npm源 shell: zsh+on-my-zsh配...

sunsmell 2019-08-26 13:54 评论0 收藏0
优秀博文收藏（不定期更新）

摘要：我的书签我的书签谨慎导入，小心覆盖工具类版本管理快速切换源配置教程指南可视化工具前端工具集前端助手网络封包截取工具格式化工具标注工具模拟请求类深入浅出布局你所不知道的动画技巧与细节常用代码黑魔法小技巧，让你少写不必要的，代码更优雅一劳永我的书签我的书签（谨慎导入，小心覆盖）工具类 nvm: node版本管理 nrm: 快速切换npm源 shell: zsh+on-my-zsh配...

zhangfaliang 2019-08-30 10:57 评论0 收藏0
前后端分离——token超时刷新策略

摘要：实现目标延长过期时间活跃用户在过期时，在用户无感知的情况下动态刷新，做到一直在线状态不活跃用户在过期时，直接定向到登录页登录返回字段如何签发，请看上一篇推文，这里不做过多介绍。如果你有更好的做法，欢迎留言告知我，谢谢啦。前言记录一下前后端分离下————token超时刷新策略！需求场景昨天发了一篇记录前后端分离应用——用户信息传递　中介绍了token认证机制，跟几位群友讨论了...

hatlonely 2019-08-16 14:20 评论0 收藏0