资讯专栏INFORMATION COLUMN

移动端不定期更新token方案

binta / 2258人阅读

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

</>复制代码

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

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

目录

模拟网络请求封装(模拟)

使用演示

结果打印

小结

模拟网络请求封装(模拟)

</>复制代码

  1. let token = 1 当前请求使用的token
  2. let refreshToken = false // 是否处于更新token中
  3. let subscribers = []; // 挂起的请求数组
  4. /**
  5. * 网络请求入口
  6. */
  7. function callApi (data, time = 1000) {
  8. console.log("0000callApi=== type:" + data.type + " token:" + token)
  9. if (refreshToken) {
  10. const retryOriginalRequest = new Promise((resolve) => {
  11. addSubscriber(()=> {
  12. resolve(request(time, data.type))
  13. })
  14. });
  15. return retryOriginalRequest;
  16. }
  17. // 判断是否是执行更新token
  18. if (data && (data.type == "refreshToken")) {
  19. const newData = request(time, data.type)
  20. refreshToken = true
  21. return newData
  22. }
  23. return request(time, data.type)
  24. }
  25. /**
  26. * 执行网络请求
  27. */
  28. function request(ms, type) {
  29. console.log("1111request=== type:" + type + " token:" + token)
  30. return new Promise((resolve, reject) => {
  31. setTimeout(resolve, ms, type);
  32. });
  33. }
  34. /**
  35. * token更新后,重新发起挂起的请求
  36. */
  37. function onAccessTokenFetched() {
  38. subscribers.forEach((callback)=>{
  39. console.log("重新请求")
  40. callback();
  41. })
  42. refreshToken = false
  43. subscribers = [];
  44. }
  45. /**
  46. * push挂起的请求
  47. * @param callback 挂起的请求
  48. */
  49. function addSubscriber(callback) {
  50. subscribers.push(callback)
  51. }
使用演示:

</>复制代码

  1. // before
  2. callApi({type: "first", token}, 1000).then(consoleResponse)
  3. // Todo
  4. callApi({type: "refreshToken", token}, 2000).then((v) => {
  5. token = 2
  6. onAccessTokenFetched()
  7. consoleResponse(v)
  8. })
  9. // doing
  10. callApi({type: "second", token}, 2000).then(consoleResponse)
  11. callApi({type: "third", token}, 2000).then(consoleResponse)
  12. callApi({type: "four", token}, 2000).then(consoleResponse)
  13. callApi({type: "five", token}, 2000).then(consoleResponse)
  14. // after
  15. setTimeout(() => callApi({type: "six", token}, 2000).then(consoleResponse), 5000)
  16. function consoleResponse (v) {
  17. console.log("2222response===type:" + v + " token:" + token)
  18. }
结果打印

</>复制代码

  1. "0000callApi=== type:first token:1"
  2. "1111request=== type:first token:1"
  3. "0000callApi=== type:refreshToken token:1"
  4. "1111request=== type:refreshToken token:1"
  5. "0000callApi=== type:second token:1"
  6. "0000callApi=== type:third token:1"
  7. "0000callApi=== type:four token:1"
  8. "0000callApi=== type:five token:1"
  9. "2222response===type:first token:1"
  10. "重新请求"
  11. "1111request=== type:second token:2"
  12. "重新请求"
  13. "1111request=== type:third token:2"
  14. "重新请求"
  15. "1111request=== type:four token:2"
  16. "重新请求"
  17. "1111request=== type:five token:2"
  18. "2222response===type:refreshToken token:2"
  19. "2222response===type:second token:2"
  20. "2222response===type:third token:2"
  21. "2222response===type:four token:2"
  22. "2222response===type:five token:2"
  23. "0000callApi=== type:six token:2"
  24. "1111request=== type:six token:2"
  25. "2222response===type:six token:2"
小结

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

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

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

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

相关文章

  • API网关设计(一)之Token多平台身份认证方案

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

    leon 评论0 收藏0
  • 优秀博文收藏(定期更新

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

    sunsmell 评论0 收藏0
  • 优秀博文收藏(定期更新

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

    zhangfaliang 评论0 收藏0
  • 前后分离——token超时刷新策略

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

    hatlonely 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<