uniapp开发——未登录登录失效页面登录后页面回调的处理-526互联

刚开始默认沿用了前边小程序的做法，即在单击事件或者onHide函数中缓存标识，onShow中读取标识，对必要的业务逻辑进行重新请求。具体代码如下：

微信小程序登录后页面回调的处理方案：

1.缓存回调刷新标识：

单击事件中设置：

methods:{
    onSubmit(){
        this.setData({
            isRefresh:true
        })
    }    
}

或者直接onHide函数中设置：

onHide(){
    this.setData({
        isRefresh:true
    })
}

2. onShow函数中读取刷新标识，如果为真则刷新页面，对必要的业务逻辑进行重新请求：

onShow: function() {
  if (this.isRefresh) {
    this.init()
　 this.setData({
        isRefresh:false
     })
   } 
}

但是到uniapp中就不行了，如果还按上边的方式，很可能会连续两次跳转到登录页面。

异常解析：

经验证，如果onLoad函数中发生了路由跳转，那么生命周期加载顺序是这样的：onLoad——onShow——onReady，这就跟小程序大相径庭了。

结果就是onLoad设置了刷新标识，onShow跟随而来，页面还没跳转出去，就已经进行回调了，最终结果就是跳了两次登录页面。

那么怎么处理呢？

解决方案：

可以采用路由跳转的回调函数，在回调函数中设置页面刷新标识，这样就能避免上边的异常情况发生了，具体代码如下：

onLoad() {
    if (uni.getStorageSync("authTicket")) {
      this.init();
    } else {
      uni.navigateTo({
        url: "/pages/login/index",
        success() {
          self.isRefresh = true;
        }
      });
    }
  },
  onShow: function() {
    if (uni.getStorageSync("authTicket") && this.isRefresh) {
      this.init();
      this.isRefresh = false;
    }
  }

后记：

uniapp尤其是纯原生渲染nvue，总会有一些与小程序、h5不同的地方，而且调试还没有那么方便，报错信息经常性的指向代码不准确，这个就只能通过console.log多输出日志查看了。