小程序token过期后, 实现无感知的刷新token

这篇博客介绍了在微信小程序中如何处理token过期的问题。当token过期时,通过重新获取新的token并自动更新,确保用户无感知地继续操作。文章详细讲解了一个封装的Http请求类,如何在请求过程中检测token状态,如果发现token过期,则调用getNewToken()方法获取新token,并在后续请求中自动带上新token,从而实现用户自动登录的功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

当我们使用在小程序中做用户登录的时候, 后台给用户一个token, 小程序端用本地缓存token ,以后每次请求的时候,带上这个token 发起请求, 后端解析token中的数据, 查看是否有过期,或其它的错误, 如果正常的话, 后端是可以从这个token中 确认这个请求是哪一个用户发送过来的

一般token过期就重新指引用户登录一下就可以了, 但是,微信小程序是可以实现用户自动登录的。

那么, 当我们的token过期了,该怎么办呢, 封装了一个 用户无感知获取token的 请求类

import {baseUrl} from "../config";  //config 文件中只定义了一个 baseUrl="http://www.mysite.com/api/"
let app = getApp();
class Http{
  baseUrl = baseUrl
 
 
  request({url,data,method="GET",header=false,callback=""}){
    wx.showLoading({    //显示请求提示框
      title: '请求中',
    })
 
    //如果header为真,则表示该请求在header中要带上token, 如果为假, 则表示请求中可以不用token
    header = header ? {token:wx.getStorageSync('token')} : {};
    let that = this;
    return new Promise((resolve,reject)=>{
      wx.request({
        url:that.baseUrl + url,
        data,
        method,
        header,
        success(res){
          
          if(callback){
            callback(res.data);  //这个代码是第二次请求到请的token后才执行的, callback其实是 第一次请求时的 resolve,而res.data是第二次请求时的结果, 这里面有点类似递归的思想
            return;               //这里是有点绕, 自已体会一下, 口才不好,讲不清楚
          }
 
          //如果请求是正确的, 则
          if(res.data.code >=200 && res.data.code <300){
            resolve(res.data);  
          }else if(res.data.code == 401){
            //这里表示token过期, 或者token出错了
            //所以在这里重新请求一个token ,并把它写入的 storage本地缓存中
            that.getNewToken().then((tokenres)=>{   //这个箭头函数中的tokenres 用处不大同下面的说法, 可以不要 ,重要的是我们要再次请求一下 刚才那一个token 过期的请求, 并把callback 赋值成 resolve
              that.request({
                url,
                data,
                method,
                header,
                callback:resolve           //这里是重点, 我们把callback 赋值为resolve,  然后来判断一下 请求中如果有 callback 就把 promise的状态改为 callback 也就是resolve,并且把 数据返回去 
              })
            })
          }else{
            that.showToast(res.data.msg);
            reject(err)
          }
        },
        fail(err){
          console.log(err);
          that.showToast("there is a mistake");
          reject();
        },
        complete(){
          wx.hideLoading({})  //关闭请求提示框
        }
      })
    })
  }
 
  //得到一个请的token
  getNewToken(){
    let that = this;
    return new Promise((resolve,reject)=>{
      wx.login({
        success(res){
          let code = res.code;
          console.log(code);
          wx.request({
            url: that.baseUrl + '/user/login',    //在user/login的接口中,后台返回用户的信息并且带有token
            data:{
              code:code
            },
            success(res){
              console.log(res);
              if(res.data.code == 200){ //这里相当于用户又一次登录,并且得到了一个新的token 并把它写入了 storage本地缓存中
                let token = res.data.data.token;
                wx.setStorageSync("token",token);
                resolve();         //通过Promise的 resolve(),把返回的结果暴露出去  这个暴露好像用处不太大, 可以不用
              }
            },
            fail(err){
              console.log(err)
            }
          })
        }
      }); 
    })
  }
 
  showToast(title,success=false){
    wx.showToast({
      title: title,
      icon:success?"success":"none",
      duration:1500
    })
  }  
}
 
export {Http}

原文传送

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值