小程序token过期后， 实现用户无感知的刷新token

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

一般token过期了是很简单的， token过期就重新指引用户登录一下就可以了， 对就是这个解决方案， 但是，但是，微信小程序好象一般的没有登录的页面， 微信小程序是可以实现用户自动登录的。

那么， 当我们的token过期了，该怎么办呢， 本人最开始的做法是  token 的过期时间，设置为10年，或更长的时间， 基本上可以理解为永不过期，哈哈， 这种做法也安然的用在了好几个项目上，但是总是觉得心里不爽，至少有安全上的隐患

现在为了解决心中的不爽，现在自已又重新封装了一个 用户无感知获取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}