mpvue小程序的登陆功能两种解决方案

image.png

首先解释一下微信官方的图解
（1）前端通过wx.login()拿到获取登录凭证code
（2） wx.request({})发送code给后台

      wx.login({
        success (res) {
          console.log(res)
          if (res.code) {
            //发起网络请求
            wx.request({
              method: "get",
              dataType: "json",
              url: '/version_3/login',
              data: {
                code: res.code
              },
              success: function (res) {
              
              }
            })
          } else {
            console.log('获取code失败！' + res.errMsg)
          }
        }
      })

（3）后台拿appid+appsecret+code去和微信服务器交涉，拿到openid+session_key然后接口返回给前端自定义登陆状态和基本信息

【另一种方式】
（1）前端通过wx.login()拿到获取登录凭证code
（2）前端通过wx.getUserInfo()拿到signature+encryptedData+iv+rawData连同code一块传给后台即可，后台接口返回给前端自定义登陆状态和基本信息，wx.getUserInfo()可以获取的信息有：

image.png

<button open-type="getUserInfo" class='bottom' type='primary' @getuserinfo='getUser'>授权登录</button>

  methods: {
    //获取微信用户信息实现登陆
    getUser: function() {
      var that=this
      //通过wx.login拿到code
      wx.login({
        success (res) {
          that.code=res.code 
          //通过wx.getUserInfo获取signature+iv+encryptedData+rawData
          wx.getUserInfo({
            success: function(res) {
              console.log("点击了允许")
              that.rawData=res.rawData 
              that.signature=res.signature         
              that.encryptedData=res.encryptedData  
              that.iv=res.iv
              //上面拿到的code和signature+iv+encryptedData+rawData传给后台获取token  
              wx.request({
                  method: "post",
                  dataType: "json",
                  url: process.env.NODE_ENV+'/version_3/login',//你的登陆接口
                  data: {
                    "code": that.code,
                    "signature":that.signature,
                    "iv":that.iv,
                    "encryptedData":that.encryptedData,
                    "rawData":that.rawData
                  },
                  success: function (res) {
                    console.log(res)
                  },
                  fail: function (res) {
                    
                  }
              })
            },
            //点击了取消
            fail:function(res){
              console.log("点击了拒绝")
            }
          })
        }
      })
    }   
  }

/**************************************/

然后就是登陆的逻辑，小程序常用的就是用户授权过一次用户的信息就被存入数据库，即使你再次关闭了小程序右上角“允许使用个人信息”也没用（虽然有点流氓但隐性的大部分都是这么做的），因为第一次的授权已经把你微信的openid（微信的唯一标示）和用户信息做了关联存到数据库了，下次进来接可以知道你之前授权过了，可以直接把你的信息返回过来
所以前端需要在交互往数据库写入数据的页面加一个判断是否授权过的方法，我的思路是页面进来时把wx.login()拿到的变化的code给后台后台返回给我是否授，和token

image.png

如果500则前端显示登陆按钮，如果200则拿返回的token去请求用户信息，显示头像和名字