小談微信小程序的靜默受權登陸

衆所周知，微信的新版API已經明確指明，當用戶首次進入小程序時，假若用戶還沒有進入小程序時，就直接喚起微信受權，或者自定義一個登陸入口頁讓用戶先受權登陸才能瀏覽小程序的內容。那麼毫無疑問，你所開發的小程序由於直接與微信的建議相違背，因此審覈結果固然是Failed...

小程序的主入口頁受權配置

當小程序處於掛載後臺退出的狀態再喚醒時，假若中間間隔的時間過長，那再次喚醒進入小程序時會形成token失效的問題，固然就會形成全部接口沒法正常顯示，所以在app.vue主入口的生命週期onShow()中（mpVue框架），須要加入獲取微信受權信息，以及獲取後臺須要的token。

1.先定義一個獲取微信受權返回的code值的promise方法

const getWxCode = () => {
  return new Promise((resolve, reject) => {
    wx.login({
      timeout: 3000,
      success: res => {
        resolve(res.code);
      },
      fail: err => {
        reject(err);
      }
    });
  })
}
export default getWxCode;
複製代碼

2.判斷用戶是否受權操做

wx.getSetting({ // 判斷是否已經受權
	success: res => {
		if (res.authSetting["scope.userInfo"]) { //用戶未受權
			... 
		}
	}
});

複製代碼

2.調用原生按鈕發起受權

<button open-type="getUserInfo" @getuserinfo="onGetUserInfo">受權</button>

onGetUserInfo(e) {
	if (e.target.errMsg === "getUserInfo:fail auth deny") {
		return; //受權彈框時點擊取消
	}
	let {
		target: { encryptedData, iv }
	} = e;
	getWxCode().then(code => {
		const params = {
			code: code,
			encryptedData: encryptedData,
			iv: iv
		};
		this.onLogin(params);
	});
}

onLogin(params) {
	API.login(params).then(//後臺獲取token的API
		res => {
			console.log(`登錄成功，token爲${res}`);
			wx.setStorageSync("AUTH_TOKEN", res.token);
		},
		fail => {
		}
	);
}

複製代碼

3.咋一看應該沒有啥問題，可是這樣作實際上是錯誤的，錯在第二步驟的onGetUserInfo方法中，若是後臺API接口須要微信返回的encryptedData、iv兩個參數，那麼就證實用戶必需要受權才能進入小程序內頁。所以，當聯調時必須通知後端去除掉這兩個參數，只傳一個code便可。這樣咱們就能達到新用戶首次進入小程序時不用受權就能進入小程序中瀏覽信息，但有交互操做（好比分享...）在喚起受權操做。

在此，爲了不每一個加靜默受權的交互位置都判斷一遍用戶是否受權，抽離了一個基於系統button的受權組件userInfoBtn。 2.判斷用戶是否受權操做

<template>
    <div class="user-info-container">
        <button class="user-info-btn" open-type="getUserInfo" @getuserinfo="mpGetUserInfo" @click.stop>
            <slot></slot>
        </button>
    </div>
</template>

<script>
  import API from "@/servers/API";
  import getWxCode from "@/utils/getWxCode";


  export default {
    name: 'userInfoBtn',
    data() {
      return {
        userInfo: {}
      }
    },
    methods: {
      mpGetUserInfo(result) {
        const self = this;
        if (result.mp.detail.errMsg !== 'getUserInfo:ok') {
          wx.showToast({
            title: '取消受權',
            icon: 'none',
            duration: 2000
          })
          wx.setStorageSync('hasUserInfo', false)
          return;
        }
        wx.checkSession({//校驗當前用戶的session_key是否有效
          success() {//處於登陸狀態
            self.getLoginData()
          },
          fail() {//須要從新登陸
            self.getLoginData()
          }
        })
      },
      getLoginData() {
        getWxCode().then(code => {
          API.login({ code })
            .then(res =>
            {
              wx.setStorageSync('hasUserInfo', true)
              this.$emit('onClickGetUserInfoBtn')
            })
            .catch(err =>
            {
              console.log(err)
            })
        });
      }
    }
  }
</script>

<style scoped>
    .user-info-btn::after {//去除系統按鈕默認樣式
        border: 0;
    }

    .user-info-btn {
        background-color: transparent;
        padding: 0;
        font-size: 0;
    }
</style>

/** 調用 **/
<user-info-btn @onClickGetUserInfoBtn="doAction">
</user-info-btn>

複製代碼