用户授权拒绝处理方案

在我的第一篇文章强塞过渡页面中，有介绍我们项目采用静默登录，在某些需要获取用户头像昵称等信息的页面，才去进行授权操作。根据需求我们以用户昵称是否为空作为是否授权判断标准，为空则需要用户进行授权获取用户信息，授权成功再调用服务器接口更新本地存储的相关用户信息，再做相关的业务逻辑处理的。

实现用户授权获取信息其实也很简单，查阅微信小程序API，可以发现调用 wx.getUserInfo() 即可实现，只要默认参数该接口可以完全独立于wx.login() 使用，因为不需要判断登录态是否过期问题，鉴于方便处理，我们项目登录时不做session检验，也就是说不需要考虑登录态状态。

所以一开始我采用了最简单的方法，在wxml使用button实现，设置button的 open-type="getUserInfo"属性，只需要在wxml中绑定事件处理点击之后的业务逻辑，这样有个好处就是，只要没授权每次都会弹出授权，可以不用去处理授权弹窗只弹一次用户拒绝授权后如何开启的问题。没授权时点击按钮效果如图1：

图1

可是，在其他页面也需要根据用户是否授权处理业务逻辑，而且这个判断逻辑是在点击切换tab进入页面就需要处理，没法绑定在具体的某个button上实现。为保证代码尽可能重用和授权弹窗处理各处保持一致，决定封装一个方法放在common.js文件中。其他地方使用时，只需调用 common.getCurUserInfo(success, fail) ，该方法只需传2个callback去处理授权成功和失败后逻辑，能更好的将重心转移到业务层面，避免开发过程中频繁判断是否授权和关注授权处理等相关的一系列问题，如：首次授权弹窗选择拒绝后，如何保证用户后期设置开启授权以及如何友好优化提示。而且我们项目是鼓励用户去授权的，因为不授权很多业务会无法进行。

某个页面使用view或者button实现绑定事件处理授权可以参考我的wxml代码：

<view class='red-package-phone'>

    <!-- 采用组件button实现 -->
    <view wx:if="{{!resumeInfo.phone}}" class='red-package'>
      <button wx:if="{{!resumeInfo.isShowPhone}}" class='red-package' open-type="getUserInfo" bindtap="sendRedPacket">  
      <image src='/image/redpack.png'></image>
      发红包查看手机号
      </button> 
    </view>
    
    <!-- 采用组件view实现 -->
    <!-- <view wx:if="{{!resumeInfo.phone}}" class='red-package' bindtap="sendRedPacket">
      <image src='/image/redpack.png'></image>
      发红包查看手机号
    </view> -->
    
    <view wx:else class='phone' bindtap="callPhone">
      <image src='/image/phone.png' mode="aspectFill"></image>
      {{resumeInfo.phone}}
    </view>

  </view>

关于授权获取用户信息的js代码如下：

/**
 * 授权获取用户信息
 * 处理逻辑：根据userInfo.name是否为空判断是否授权
 * userInfo.name ="" => 进行授权获取用户信息 
 * userInfo.name !="" => 即已授权，调用success回调
 * @param success 授权获取用户信息成功的业务逻辑处理
 * @param fail 授权获取用户信息失败的业务逻辑处理
 */
var getCurUserInfo = function (success, fail) {
  /**
   * 方法1: 使用组件button实现：设置button open-type="getUserInfo"，未允许则每次都会弹出授权弹框
   */
  /*
  if (!getApp().globalData.userInfo.name) {
    wx.getSetting({
      success(res) {
        wx.getUserInfo({
          success: function (res) {
            //获取用户信息成功后，调用服务器接口更新用户相关信息
            updateUserInfo(res.userInfo, success)
          },
          fail: function (res) {
            console.log('用户选择拒绝授权获取用户信息')
            fail(res)
          }
        })
      },
      fail(res) {
        fail(res)
      }
    })
  }else {
    success(getApp().globalData.userInfo)
  }
  */

  /**
   * 方法2: 使用组件view实现:首次弹出授权弹框，选择允许后不再弹，选择拒绝后下次弹出提示进设置页面开启授权
   */
  if (!getApp().globalData.userInfo.name) {
    wx.getSetting({
      success(res) {
        console.log(res.authSetting);
        var authSetting = res.authSetting;
        if (isEmptyObject(authSetting['scope.userInfo'])) {
          //首次授权,弹授权提示框,注意只会弹一次
          wx.authorize({
            scope: 'scope.userInfo',
            success() {
              wx.getUserInfo({
                success: function (res) {
                  //获取用户信息成功后，调用服务器接口更新用户相关信息
                  updateUserInfo(res.userInfo, success)
                },
                fail: function (res) {
                  console.log('用户选择拒绝授权获取用户信息')
                  fail(res)
                }
              })
            },
            fail() {
              console.log('调用authorize方法失败')
              fail(res)
              wx.showModal({
                title: '用户未授权',
                content: '如需正常使用微信红包支付，请按确定并在授权管理中选中“用户信息”，然后点按确定。最后再重新进入小程序即可正常使用。',
                showCancel: false,
                success: function (res) {
                  if (res.confirm) {
                    wx.openSetting({
                      success: function success(res) {
                        console.log('调用openSetting方法success:', res);
                      },
                      fail: function (res) {
                        console.log('调用openSetting方法fail:', res);
                      }, complete: function (res) {
                        console.log('调用openSetting方法complete:', res);
                      }
                    });
                  }
                }
              })
            }
          })
        } else {
          //首次授权选择拒绝后，为保证未授权时下次能弹出提示弹窗的处理
          if (!authSetting['scope.userInfo']) {
            wx.showModal({
              title: '用户未授权',
              content: '如需正常使用微信红包支付，请按确定并在授权管理中选中“用户信息”，然后点按确定。最后再重新进入小程序即可正常使用。',
              showCancel: false,
              success: function (res) {
                if (res.confirm) {
                  wx.openSetting({
                    success: function success(res) {
                      console.log('调用openSetting方法success:', res);
                    },
                    fail: function (res) {
                      console.log('调用openSetting方法fail:', res);
                    }, complete: function (res) {
                      console.log('调用openSetting方法complete:', res);
                    }
                  });
                }
              }
            })
          } else {
            wx.getUserInfo({
              success: res => {
                updateUserInfo(res.userInfo, success)
              },
              fail(res) {
                console.log('调用openSetting方法失败:', res)
                fail(res)
              }
            })
          }
        }
      },
      fail(res) {
        console.log('调用getSetting方法失败:', res)
        fail(res)
      }
    })
  } else {
    success(getApp().globalData.userInfo)
  }
}

采用方法2， 首次选择了拒绝后会弹提示弹窗，点击确定会跳转到设置页面，可以开启授权。
拒绝授权后点发红包按钮效果如图2:

图2

点提示用户未授权弹窗确定按钮效果如图3:

图3
图4

至此授权获取用户信息在本项目中都统一成图1-3的效果了。总结下：

1、简单快捷实现方式：推荐用button设置 open-type="getUserInfo" 属性，即方法1，只需绑定事件处理业务逻辑，这种方式能保证每次都弹授权弹窗；
2、较为复杂实现方式：不依赖button组件，任何元素或者非元素绑定时，考虑方法2，这种方式授权弹窗只会在首次出现，拒绝可以自定义提示弹窗引导用户在设置页面进行授权。