⼩程序登录授权流程⼩程序的登录授权是开发⼩程序中必不可少的⼀部分今天整理了⼀下⼩程序的登录授权的流程
⾸先是官⽅给的⼩程序的登录授权流程图
下⾯是主要的部分哦~
1.项⽬路径结构
2.登录和未登录的不同状态 my.wxml页⾯
通过判断是否有token值来控制切换
<view class="user_header_container">
<!-- -----------登录成功显⽰的---------- -->
<view class="user_header" wx:if="{{userStatus}}">
<view class="user_picture">
<image src="{{userinfo.avatarUrl}}"></image>
</view>
<view class="user_name_container">
<view class="user_name">{{userinfo.nickName}}</view>
</view>
</view>
<!-- -----------未登录显⽰的---------- -->
<view class="user_header" wx:else>
<view class="user_picture">
<image src="/pages/image/noloading.png"></image>
</view>
<view class="user_name_container">
<button open-type='getUserInfo' bindgetuserinfo="getuserinfo">未登录</button> </view>
</view>
3.判断是否登录
data: {
// ⽤户信息
userinfo:{},
userStatus:'',
loadingView:false
},
//页⾯初始化时需要判断
onLoad: function (options) {
StorageSync('token')){
success: res => {
console.log("信息", res)
this.setData({
userinfo:res.userInfo,
StorageSync('token')
})
// console.log(this.data.userStatus)
}
})
}
},
/
/每次进⼊我的页⾯都要判断⼀下
/**
* ⽣命周期函数--监听页⾯显⽰
*/
onShow: function () {
StorageSync('token')){
success: res => {
// console.log("信息", res)
this.setData({
userinfo:res.userInfo,
StorageSync('token')
})
// console.log(this.data.userinfo)
}
})
}else{
this.setData({
userStatus:''
})
}
},
接下来就是重点了⼩程序的登录注册
4.弹框页⾯ .wxml
<!---------------确认登录的弹框开始-------------- -->
<view class="login_dialog" wx:if='{{isShow}}'>
<view class="wrapper">
<view class="header">
<view class="header_image">
<image class="icon" src="{{userinfo.avatarUrl}}"></image>      </view>
<view class="username">{{userinfo.nickName}}</view>
</view>
<view class="content">
<view>请授权⼩程序登录</view>
<view>我们不会公布你的这些信息</view>
<view>只是为了给你提供更好的服务</view>
</view>
<view class="footer">
<button
type="primary"
open-type='getUserInfo'
bindgetuserinfo="getuserinfo"
>允许</button>
<button bindtap="nologin">暂不登录</button>
</view>
5.登录注册的核⼼
methods: {
getuserinfo(e) {
ptedData = ptedData
this.data.iv = e.detail.iv
// 调⽤函数
this.logintap()
写文章的小程序this.setData({
isShow:false
})
},
// =======验证登录=======
logintap() {
wx.login({
complete: (res) => {
de).then((res)=> {
// console.log(res)
// 临时登录凭证code
if (de == 0) {  //登录成功
// console.log("666666", res)
wx.setStorageSync('token', ken)  //保存token                }
if (de == 10000) {
//code为10000代表没有注册过
//调⽤注册函数
// console.log(111)
}
})
}
})
},
// 注册函数
register() {
wx.login({
complete: (res) => {
console.log("1111112222", res)
// code: de,
// iv: this.data.iv,
// encryptedData: ptedData  //加密⽤户信息
//配置注册参数
de,this.data.iv, ptedData ).then(function (res) {
console.log("zhuce", res)
if (de == 0) {
this.logintap()  //注册成功在调⽤登录
wx.setStorageSync('token', ken)
console.log(res.data)
}
})
}
})
},
}
6.退出登录
退出登录其实很简单就是清除保存在Storage中的信息和token
nologin() {
// console.log(1111111)
wx.setStorageSync('token', '')
},
7.检测当前⽤户登录态是否有效
检测当前⽤户登录态是否有效⽤的是wx.checkSession⽅法
wx.checkSession({ success: function(){ //session 未过期，并且在本⽣命周期⼀直有效 }, fail: function(){ //登录态过期 wx.login() //重新登录 .... } })
过程写的有些粗糙但⼤体的思路就是这样了其中⾥边⽤到的登录和注册接⼝都是之前封装好的直接拿来⽤的我之前的⼀篇⽂章介绍过⼩程序封装request 感兴趣的可以去看⼀下
每天⼀个⼩知识点，⼀点⼀点的成长，加油！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。