微信小程序登录组件封装 —— 一次性解决需要已登录状态才能继续的操作

    // 未登录状态
    //获取用户信息
    handleUserInfo: function (e) {
      if (e.detail.errMsg ===
        "getUserInfo:ok") {
        wx.showLoading({
          title: '登录中...',
          mask: true,
        });

        // 这里是一个登录的相关操作的封装，引入的外部js文件
        // login().then(() => {
        //   this.triggerEvent('onLoginSuccess', {
        //     payload: this.data.payload
        //   })
        // })

        //模拟登录
        setTimeout(() => {
          wx.setStorageSync('isLogin', true);
          wx.hideLoading();
          this.triggerEvent('onLoginSuccess', {
            payload: this.data.payload
          })
        }, 2000) 

      } else {
        wx.showToast({
          title: "登录失败，请稍后重试",
          icon: 'none'
        });
      }
    },

    //已登录状态
    handleTap: function () {
      this.triggerEvent('onLoginSuccess', {
        payload: this.data.payload
      })
    }

<view class='container' bindtap="handleTap" wx:if="{{isLogin}}">
    <slot></slot>
</view>
<view class='container' wx:else>
    <button
            class='auth'
            open-type="getUserInfo"
            bindgetuserinfo="handleUserInfo"
    >
        授权登录
    </button>
    <slot></slot>
</view>

.container{
    position: relative;
}
.auth{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1000;
    font-size: 0;
    line-height: 0;
}

{
  "usingComponents": {
    "login-view": "../../component/login-view/login-view"
  }
}

<login-view hasLogin='{{hasLogin}}' payload='sendInData<AnyType>' bind:onLoginSuccess="jumpToLogsPage">
   <view class='login'>已登录状态才能跳转</view>
</login-view>

  onShow: function () {
    this.setData({
      hasLogin: wx.getStorageSync('isLogin')
    })
  },

 /**
  * 点击事件原来需要做的操作
  * 登录成功后自动继续做这个操作
  */
  jumpToLogsPage: function(data) {
    console.log("data:", data)
    wx.navigateTo({
      url: '../logs/logs'
    })
  }