uniapp微信小程序登录流程
uniapp微信小程序登录流程
·
1 访问微信接口获取用户授权 获取用户信息
2 获取code
3向后端服务器发请求拿到token 缓存用户信息
//1 访问微信接口获取用户授权 获取用户信息
login(){
wx.getUserProfile({
desc: '用于完善会员资料', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
success: res => {
console.log(res)
uni.setStorageSync('avatarUrl', res.userInfo.avatarUrl)
this.encryptedData = res.encryptedData;
this.iv = res.iv
//2 获取code
uni.login({
//登录平台
provider: 'weixin',
success: loginRes => {
// getApp().globalData.code = loginRes.code
console.log('code:', loginRes.code)
this.code = loginRes.code
}
})
//3向后端服务器发请求拿到token 缓存用户信息
this.getOpenId()
},
fail: res => {
console.log(res)
uni.showToast({
icon: 'none',
title: '获取授权失败,请重新授权',
duration: 1000
})
}
})
},
4更新数据 例如用户头像 和处理其他业务
//4更新用户头像处理其他业务
getOpenId(){
this.getopenids({
code:this.code,
encryptedData:this.encryptedData,
iv:this.iv,
}
).then(res=>{
uni.hideLoading()
console.log('done',res);
if(res.data.code == 1){
uni.setStorageSync('token',res.data.data.userinfo.token)
uni.setStorageSync('userinfo',res.data.data.userinfo)
this.nickname=userInfo.nickName
this.avatarUrl=userInfo.avatarUrl
}else{
uni.showToast({
title:res.data.msg,
icon:'none'
})
}
})
}
5下来在api接口文件请求头里动态获取token 即可在所有页面判断用户登录状态 实现拦截效果
return uni.request({
url: getUrl(url),
data: param,
header: {
token: uni.getStorageSync('token')
// token: 123
},
...other,
})
更多推荐
已为社区贡献2条内容
所有评论(0)