微信小程式登入方式的修改解決方案

tinaawang發表於2019-03-04
微信小程式

微信小程式官方登入方式修改，要求通過button點選登入，和大家分享一下我的解決方案。

原先的登入邏輯是註冊一個全域性login方法， login方法中首先呼叫wx.login靜默登入，獲取臨時登入憑證code，在開發者伺服器後臺呼叫 api，使用 code 換取 openid 和 session_key 。然後呼叫wx.getUserInfo獲取使用者資訊。

現在的實現邏輯是寫一個button中轉頁，進入小程式wx.getUserInfo獲取失敗後跳轉到button中轉頁，點選button呼叫bindgetuserinfo方法,該方法返回的detail資料與wx.getUserInfo方法返回的資訊一致，此時也可以獲取到使用者資訊。回撥成功後wx.navigateBack({})回原頁面。

下面貼上部分程式碼片段：

async bindGetUserInfo(event) {
    const { detail } = event;

    const isSuccess = detail.errMsg === `getUserInfo:ok`;

    if (isSuccess) {
      this.authSuccess(detail);
      return;
    }
    // 使用者拒絕授權
    // wx.navigateBack({});
  }
  
  
  
  async authSuccess(detail) {
    await this.getToken(detail);
    wx.navigateBack({});

    // this.nextHander();
  }
  
  
  
儲存使用者資訊
 async getToken(detail) {
    console.log(`getToken`, detail);

    const session_key = wx.getStorageSync(`session_key`);

    const { encryptedData: encrypted_data, iv } = detail;
    const that = this;

    // 儲存使用者資訊到伺服器
    const { data: { user, up_token, token, is_created } } = await this.fetch({
      url: `/api/artisan/wechat/login`,
      data: {
        session_key,
        encrypted_data,
        iv,
      },
      method: `POST`,
    });
    wx.setStorageSync(`user`, user);
    this.$root.$parent.store.set(`up_token`, up_token, 30);
    // 儲存使用者識別符號到本地
    this.$root.$parent.store.set(`token`, token, 30);
    this.$root.$parent.store.set(`is_created`, is_created, 30);
    //  redux
    // store.dispatch({
    //   type: `SET_IS_CREATED`,
    //   payload: is_created,
    // });
  }
複製程式碼

就醬愉快的重構結束~

相關文章