小程序授权登录流程及操作

---

前言

做小程序最必不可少也比较复杂的就是授权登录啥的了。不同的项目会有不同的写法，这里把我之前的一种写法分享一下，授权和登录是分开的，授权之后才能登录(还有授权登录一体的，这里没有写)

---

一、判断有没有授权

当你进入小程序时，就要判断你有没有授权，所以要再app.js进行操作。这里我们通过小程序提供的wx.getSetting来进行判断有没有授权

onLaunch: function () {
...
 // 判断用户有没有授权
    wx.getSetting({
      success: res => {
        console.log(res.authSetting['scope.userInfo'])
        if (res.authSetting['scope.userInfo']) {//如果已经有了用户信息证明用户已经授权过
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
         console.log('授权啦')
        }else{
          // 没有授权,就跳到是否授权的页面
          console.log('没有授权！')
          wx.navigateTo({
            url: '/packageA/pages/power/power',
          })
        }
      }
    })
}

二、授权页面进行授权

由上一步，我们进入小程序时就会判断有没有授权。如果授权了直接进入首页，如果没有授权就会强制跳到授权页面，让用户进行授权

当点击去授权时，我们就要用到小程序的button组件提供的open-tupe属性来进行授权，如下：

这里是wxml代码，主要通过open-type属性，点击"去授权"就会有一个小程序提供的弹框

<view class="container">
	<image src="../../../img/img.png"></image>
	<text>请先授权哦！😊</text>
	<button size="mini" bindgetuserinfo="ok" type="primary" open-type="getUserInfo">去授权</button>
  <button size="mini" catchtap="no">先不授权</button>
</view>

当用户点击允许时会授权并得到用户信息：

// 如果同意授权之后
//这里是bindgetuserinfo属性触发的方法，可以直接获取到用户信息
  ok(e){
      console.log(e,e.detail.userInfo)//用户信息
      if(e.detail.userInfo){
      //如果拿到了用户信息，就将信息存到本地，在“我的”页面备用
        wx.setStorage({
          data: e.detail.userInfo,
          key: 'userInfo',
        })
        app.globalData.userInfo=e.detail.userInfo
        wx.switchTab({//跳转到首页
          url: '../../../pages/index/index',
        })
      }
  },
  no(e){//若点击暂不授权也会进入首页但是处于没有授权状态很多页面有没有数据和效果
  wx.switchTab({
    url: '../../../pages/index/index',
  })
},

三、登录

授权完毕显然就要判断是否登录了，我的登录写在了“我的”页面。当用户没有登陆时拿到的数据也是不全的

ps:用户授权后才能拿到code码，通过code码才能登录，登陆后才能拿到token!!

此时我们点击登录，会通过wx.login触发登录事件，登录成功后才能得到token

// 登录事件
hmwLogin(){
  wx.login({//小程序提供的登录事件
    success:async (res)=>{
    //授权成功后才能得到code
      if(res.code){//如果有code
      //我们就传入code码，请求登录
        let {data}=await request('https://api.it120.cc/huangmengwen/user/wxapp/login',{code:res.code},'POST')
        if(data.code==0){//如果登陆成功
            // 保存token和状态
            wx.setStorage({
              data: data.data.token,
              key: 'token',
            })
            //将页面样式改成登录后的效果
           this.setData({
             flag:true
           })
        }else{
          Notify('登陆失败')
        }
      }
    }
  })
},

当登录成功，保存好token之后，页面会转变为登录之后的状态，一套流程就简单的走完啦！！

流程图

这里有别的大佬总结的流程图，差不多就是这么走的啦，你也可以酌情改变一下😁

---

总结

这里只是我的一些浅薄的分享，希望对大家有帮助哦🙂！！！