小谈微信小程序的静默受权登陆

众所周知，微信的新版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>

复制代码