小程序token过期后，实现无感知的刷新token-Toy模板网

这篇具有很好参考价值的文章主要介绍了小程序token过期后，实现无感知的刷新token。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

当我们使用在小程序中做用户登录的时候，后台给用户一个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}