前言
想明白小程序的授权登录就必须知道授权登录的流程
如下图所示
一、一个小程序的状态
我们需要了解小程序有哪几种状态以及发展的方式
如上图所示,我个人归纳为四种
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
})
}
}
})
},
总结
用户授权登录其实看起来挺绕的,写起来没有什么难度,习惯了就好了,只要能知道小程序属于一个什么样的状态就可以进行逻辑的编写了 ,祝大家早日完成项目!!!