暑期实训12-拦截判断token

最新推荐文章于 2024-04-07 17:37:01 发布

qq_43355011

最新推荐文章于 2024-04-07 17:37:01 发布

阅读量231

点赞数

分类专栏：暑期实训

本文链接：https://blog.csdn.net/qq_43355011/article/details/118964092

版权

暑期实训专栏收录该内容

15 篇文章 0 订阅

订阅专栏

判断token以及调整执行顺序

1 理想操作
2 实际操作

1 理想操作

项目的拦截器中设置了：如果token过期，会返回不合法，要求重新wx.login，而我的代码是：onload中初始化list，这个请求中会用到token，后面是wx.login，请求得到token并存储。
现在的一个问题就是：初始化list的请求中使用的token是旧的，而wx.login获得的token会在下一次的请求中用到，初始化list的请求中使用的token不是新的，可能会有不合法的情况。
所以需要先判断token是否过期，如果不合法，调用wx.login，如果合法，则直接使用。关于发请求前的检查，后台会加一个专门用来检查的接口，加了之后，封装到小程序端的utils里，使用的时候直接调用就可以了。
后端的接口：请添加图片描述

2 实际操作

当清空缓存后再编译，我的代码会报错：500，就是因为原来储存的是旧的token，清除缓存后，token为空，发起网络请求的时候，缺少token，就会报错。

因为wx.request 是异步执行的，就是说在加载页面数据的时候request同时请求，也就是说登录还没完成就请求数据，所以就会发生请求活动信息的时候storage里面根本没有token。

请添加图片描述

在经过商量后，决定在app.js中onlaunch函数里使用util.js中的登录函数，由此获得token，在page.js的onload里使用token。但因为app.js的onLaunch 和page.js 的 onload是同时进行的，所以需要在activity页面等待app.js onLaunch完成才能发送请求。

参考微信小程序onLaunch异步,首页onLoad先执行?
和微信小程序app.js的onLaunch执行完之后再执行Page的onLoad & 小程序onLaunch和onLoad执行顺序
后一个要比前一个更加详细，但大体内容都差不多。

按照博客，在app.js的globaldata里加一个布尔变量，判断token是否已经获得，在onLaunch里面调用login后，加一个callback函数，用来应对当page.js里的onload先执行完的情况，需要返回执行这个callback函数。在page.js里获取应用实例，在onload里面加一个判断，判断app.js onLaunch是否执行完毕是否得到token。

// app.js
import util from './utils/util.js';
App({
  onLaunch() {
    util._login().then((res) => { 
      console.log("在app.js onLaunch 调用 login完成");
      this.globalData.check=true;//成功获得token
      //由于这里是网络请求，可能会在 Page.onLoad 之后才返回
        // 所以此处加入 callback 以防止这种情况
        if (this.checkLoginReadyCallback){
          this.checkLoginReadyCallback(res);}
    }).catch((err) => {
      console.log(err)
    })
  },
  onShow() {},
  globalData: {
    check:false //检查login是否执行完成，即token是否得到
  }
})

//page.js
const app = getApp(); //获取应用实例
Page({
   /**
  * 生命周期函数--监听页面加载
  */
  onLoad: function (options) {
    var _this = this;
    wx.showLoading({
      title: '加载中...',
      mask: true  //显示触摸蒙层  防止事件穿透触发
  });
    /**初始化list*/
    //判断app.js onLaunch是否执行完毕  是否得到token
    if (app.globalData.check){
      _this.getAjaxList(1); //初始化活动列表
    }else{
      app.checkLoginReadyCallback = res => {
        _this.getAjaxList(1);
      };
    }
 },
})