mpvue框架---小程序授权登录流程让我们来看一下wx.getUserInfo()获取用户信息，也是拥有success

前言

流程图概览

    > 最近在做的一个使用美团团队开发的mpvue框架来做一个小程序商城，如今来分享一下小程序的授权登录流程。
    > 小程序广泛使用的登录校验方式是获取用户在该小程序的openid，这是独一无二的一个标识符，不再像是浏览
      器登录那样子直接使用用户名、密码来向服务器换取token来标识登录状态。

第一步

我们需要对用户进行权限校验，判断用户是否已经对小程序进行过权限设置，我们来看一下小程官方文档中对wx.getSetting()的定义，他接受一个Object参数，有三个回调函数，我们通常只用到success和fail参数

    /* 封装了以后，接收三个参数，第一个传进来的auth，
    *  在success回调函数中判断用户是否对"scope.userInfo": true 进行了授权，
    *  已经授权则进行onSuccess回调，反之则onFail
    */
    export function getSetting(auth, onSuccess, onFail) {
      wx.getSetting({
        success (res) {
          console.log(res)
          if (res.authSetting[`scope.${auth}`]) {
            onSuccess(res)
          } else {
            onFail(res)
          }
        },
        fail (res) {
          console.log(res) // 直接抛出异常
        }
      })
    }

调用wx.getSetting()校验权限，然我们来看下返回的数据吧，不出意料的authSetting返回了空

第二步

假设我们是第一次登录，首先进行了wx.getSetting()校验授权，不出意外的肯定是会返回一个onFail回调，这时候我们就需要弹授权面板，来让用户进行手都授权

这时候就需要用到小程序提供的open-type这一开放能力了

(注意：open-type需要挂载在button中) 让我们来看一下如何调用吧

      // 这时候需要设置open-type="getUserInfo",并且监听getuserinfo
      <button 
        open-type="getUserInfo" 
        @getuserinfo="getUserInfo"
        class="auth-btn"
      >
        授权登陆
      </button>

获得用户权限后我们再来看下wx.getSetting()返回的数据吧,authSetting下的scoped.userInfo 变为了true

第三步

让我们来看一下wx.getUserInfo()获取用户信息，也是拥有success、fail回调函数。该函数调用成功后顾名思义会返回用户的信息，包括头像、名称等

    // 这是简单封装了的getUserInfo,在success回调函数中添加了两个函数
    export function getUserInfo(onSuccess, onFail) {
      wx.getUserInfo({
        success(res) {
          console.log(res)
          let {userInfo} = res
          if (userInfo) {
            onSuccess(userInfo)
          } else {
            onFail(res)
          }
        },
        fail(res) {
          console.log(res) // 直接抛出异常
        }
      })
    }

再来看看如何在页面中调用吧

    getUserInfo () {
      getUserInfo(
        // 拿到了userinfo后，调用小程序提供的setStorageSync把数据存储在本地
        (userInfo) => {
          wx.setStorageSync('userInfo', userInfo)
          // 判断是否已经获取过openId
          const openId = wx.getStorageSync('openId')
          if (!openId || openId.length === 0) {
            console.log('请求openId')
            getOpenId()
          } else {
            console.log('获得openId')
          }
        },
        () => {
          console.log('failed...') // 获取用户信息，抛出异常
        }
      )
    },

第四步

如果在storage中找不到openId，则会进行调用wx.login()方法

调用接口获取登录凭证（code）。通过凭证进而换取用户登录态信息，包括用户的唯一标识（openid）及本次登录的会话密钥（session_key）等。用户数据的加解密通讯需要依赖会话密钥完成。更多使用方法详见

    export function getOpenId () {
      wx.login({
        success(res) {
          console.log(res)
          if (res.code) {
            var code = res.code; //返回code
            console.log(code);
            // 小程序的appId
            var appId = '...';
            // 小程序的secretId,可在开发者中心中查看
            var secret = '...';
            wx.request({
              url: 'https://api.weixin.qq.com/sns/jscode2session?appid=' + appId + '&secret=' + secret + '&js_code=' + code + '&grant_type=authorization_code',
              data: {},
              header: {
                'content-type': 'json'
              },
              success: function (res) {
                var openid = res.data.openid //返回openid
                console.log('openid为' + openid);
              }
            })
          } else {  
            console.log(res) // 直接抛出异常
          }
        },
        fail(res) {
          console.log(res) // 直接抛出异常
        }
      })
    }

感谢各位能看到这里，讲得不好请多多谅解~