当前位置:   article > 正文

微信小程序自动刷新token,无感刷新token_此项目为小程序。小程序完成第一版token刷新设计思路是:根据接口调用返回的errorc

此项目为小程序。小程序完成第一版token刷新设计思路是:根据接口调用返回的errorc

        小程序登录开发通常是调用wx.login获取code,然后发送到后台,后台请求微信拿到用户openId,然后根据openId查询用户,有就走登录流程然后返回token,没有则创建用户之后走登录流程然后返回token,也就是都需要返回一个有时效性的token给小程序端,来保持登录状态,并且后续请求都需要token来验证用户。

        那么就有一个问题,就是token的时效性,token过期,后台返回认证授权失败,那么怎么做到无感刷新token,让用户即使token过期了自动刷新token呢?经过查询跟实践,我封装了一个请求类。

        思路大致是根据后台返回的状态,如果返回的是授权失败,那么就会保存当前请求,调用刷新token的请求,成功之后再次发起之前保存的请求,这样就可以达到用户无感的刷新token。

        具体封装类api.js如下,本次代码采用uniapp框架开发,实际项目中每次发起后台请求只需要调用req方法即可做到无感刷新token:

微信小程序自动刷新token,无感刷新token,封装的api工具类icon-default.png?t=N7T8https://download.csdn.net/download/weixin_47315082/88041695

  1. //定义token在Storage中的key值
  2. var tokenKey = "token";
  3. //constant.js中定义请求url地址,例如baseUrl:http://192.168.0.5/api
  4. import constant from './constant.js'
  5. export function logout() {
  6. //退出时删除token
  7. uni.removeStorageSync('token')
  8. }
  9. //定义登录方法,传入wx.login获取到的code
  10. export function login(data) {
  11. let header = {};
  12. header['Content-type'] =
  13. 'application/json;charset=utf-8';
  14. return new Promise((resolve, reject) => {
  15. uni.request({
  16. //调动后台自定义微信登录方法,获取token
  17. url: constant.baseUrl + "/wxLogin",
  18. data: data,
  19. header: header,
  20. method: 'POST',
  21. success(res) {
  22. try {
  23. if (res.statusCode === 200 && res.data.code === 200 && res.data.data.token && res.data.data.token !== "false") {
  24. //获取成功,保存token到Storage中
  25. uni.setStorageSync(tokenKey, res.data.data.token);
  26. resolve(res.data)
  27. } else {
  28. //获取成功,删除当前Storage中的token
  29. uni.removeStorageSync('token')
  30. reject(res)
  31. }
  32. } catch (e) {
  33. console.log("res.data");
  34. //请求失败
  35. reject(e)
  36. }
  37. },
  38. fail(err) {
  39. console.log('request', err)
  40. //请求失败
  41. reject(err)
  42. }
  43. })
  44. })
  45. }
  46. //自定义通用请求类
  47. export function req(config) {
  48. let method = config.method || 'GET';
  49. let url = config.url || "";
  50. let data = config.data || {};
  51. let header = config.header || {};
  52. //关键点:定义一个callback变量,来保存需要刷新token之后再次发起的请求
  53. let callback = config.callback;
  54. header['Content-type'] = config.contentType || (method == 'POST_PARAMS' ? 'application/x-www-form-urlencoded' :
  55. 'application/json;charset=utf-8');
  56. //获取当前Storage中的token值
  57. let tokenValue = uni.getStorageSync(tokenKey) || ' ';
  58. //这里自定义请求,如果请求url中包含"/f/",说明该请求不需要验证token,否则就需要,将token值存入请求头中供后台验证,'Authorization'为后台自定义token的请求头key值
  59. if (url.indexOf("/f/") < 0) {
  60. header['Authorization'] = tokenValue;
  61. }
  62. return new Promise((resolve, reject) => {
  63. //发起请求
  64. uni.request({
  65. url: constant.baseUrl + url,
  66. data: data,
  67. header: header,
  68. method: method,
  69. success(res) {
  70. //如果callback存在,说明是需要再次发起请求,直接调用callback即可
  71. if (callback) {
  72. return callback(res.data);
  73. }
  74. if (res.statusCode === 401 || res.data.code === 401) {
  75. //如果返回401,说明当前token认证授权失败,也就是说需要刷新token
  76. if (tokenValue && tokenValue !== ' ') {
  77. //删除当前无效token
  78. uni.removeStorageSync('token');
  79. }
  80. //调用重新获取token方法
  81. getNewToken().then((res) => {
  82. //获取token成功,将当前请求存入到callback
  83. config.callback = resolve;
  84. //获取token成功,重新发起请求
  85. req(config)
  86. })
  87. } else if (res.statusCode === 200) {
  88. //token有效,返回成功
  89. resolve(res.data)
  90. }
  91. },
  92. fail(err) {
  93. console.log('request', err)
  94. //请求失败
  95. reject(err)
  96. }
  97. })
  98. })
  99. }
  100. //重新获取token
  101. export function getNewToken() {
  102. return new Promise((resolve, reject) => {
  103. //调用uni.login获取小程序用户code
  104. uni.login({
  105. success(res) {
  106. //调用login登录
  107. let loginRes = login({
  108. code: res.code
  109. });
  110. resolve(loginRes);
  111. },
  112. fail(err) {
  113. reject()
  114. console.error('wx login fail', err);
  115. }
  116. });
  117. })
  118. }

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Guff_9hys/article/detail/744033
推荐阅读
相关标签
  

闽ICP备14008679号