小程序授权登录流程

前言

想明白小程序的授权登录就必须知道授权登录的流程
如下图所示

一、一个小程序的状态

我们需要了解小程序有哪几种状态以及发展的方式
如上图所示，我个人归纳为四种
1，未授权状态
2，授权未注册状态
3，授权未登录状态
4，登录后头部失效状态

二、未授权状态

1.检测是否授权

代码如下

wx.getSetting({
      success: function (res) {
        if (res.authSetting['scope.userInfo']) {
          console.log("用户授权了");
          that.data.isHide = false;
          that.setData({ 
            isHide: that.data.isHide
          })
        } else {
          //用户没有授权
          console.log("用户没有授权");
        }
      }
    });

2.如以授权

则让其去验证是否注册的状态，代码如下

// 获取用户加密信息
  info() {
    let that = this
    wx.getUserInfo({
      success: res => {
        console.log(res)
        this.data.encryptedDatas = res.encryptedData
        this.data.ivs = res.iv
        this.setData({
          encryptedDatas: this.data.encryptedDatas,
          ivs: this.data.ivs
        })
        that.zcinfo()
      }
    })
  },
  async zcinfo() {
    let that = this
    wx.login({
      success: async function (res) {
        console.log(res)
        let {
          data: info
        } = await request(`注册的路径地址`, {
        	//需要传递的参数
          "code": res.code,
          "encryptedData": that.data.encryptedDatas,
          "iv": that.data.ivs
        })
        console.log(info)
        //看看是否注册成功
      }
    })
  },

3.如未授权

则让其进入到授权页面，通过点击事件来获取用户信息，写入逻辑代码如下

//授权登录事件
  bindGetUserInfo: function (e) {
    if (e.detail.userInfo) {
      //用户点击了允许按钮
      var that = this;
      // 获取到用户的信息了，打印到控制台上看下
      console.log("用户的信息如下：");
      console.log(e.detail.userInfo);
      //授权成功后,通过改变 isHide 的值，让实现页面显示出来，把授权页面隐藏起来
      this.info()
      //用户注册
      that.setData({
        isHide: false
      });
      this.login()
      //用户登录
    } else {
      //用户按了取消按钮
      console.log("用户选择取消")
      return false
    }
  },

4.登录

在最开始就要访问登录接口，看返回的code码来决定用户是否注册过，如注册过直接登录，如未注册则去注册然后登录，代码如下

 // 登录
  login() {
    let that = this
    wx.login({
      success: async function (res) {
        console.log(res)
        let {
          data: sss
        } = await request(`路径?参数`)
        console.log(sss)
        if (sss.code == 10000) {
          wx.showToast({
            title: '您为新用户，正在注册',
            icon: 'none',
            duration: 2000
          })
        } else {
          wx.showToast({
            title: '登陆成功',
            icon: 'none',
            duration: 2000
          })
          wx.setStorage({
            key: "user",
            data: sss.data.token,
          })
          wx.navigateBack({
            delta: 1
          })
        }
      }
    })
  },

总结

用户授权登录其实看起来挺绕的，写起来没有什么难度，习惯了就好了，只要能知道小程序属于一个什么样的状态就可以进行逻辑的编写了 ，祝大家早日完成项目！！！