小程序实现授权登陆的解决方案

2023-09-05 01:58:05 333

前言

之前写过一个关于微信授权登陆的文章

传送门

最近在做小程序的项目，依旧是商城，又开始研究微信的登陆授权坑，第一次接触小程序，授权登陆也是一塌糊涂以后再慢慢的改进

场景

微信用户可以通过搜索进入小程序
也可以通过别人分享进入小程序
进入小程序之后需要用户授权拿到用户信息进行注册

代码实现

初始化页面home页用户第一次进入小程序必须授权后台注册并登陆

app.json

{
"pages":[
"pages/home/index",
"pages/login/index",
...
]
}

constApp=getApp()
import{loginModel}from'../../models/login.js'
import{MineModel}from'../../models/mine.js'
import{encodeUnicode}from'../../utils/index.js'
constModelLogin=newloginModel()
constModelmine=newMineModel()
Page({
data:{
logged:!1,
isauth:false,
locked:false
},
onLoad:function(options){
//返回到之前要刷新
varpages=getCurrentPages()//获取页面栈
varprevPage=pages[pages.length-2]//前一个页面
prevPage.setData({
isBack:true
})
},
onShow:function(){
//如果已经授权则显示登录,直接登录不调用授权
App.WxService.getSetting().then(res=>{
if(res.authSetting['scope.userInfo']){
this.setData({
isauth:true
})
}
})
//token不能在page外面定义，变量写在page外面有缓存
consttoken=App.WxService.getStorageSync('utoken')
//如果有token显示已经授权
this.setData({
logged:!!token
})
token&&setTimeout(this.goBack,1500)
},
login(){
this.wechatSignUp()
},
goBack(){
//返回登录之前的页面
wx.navigateBack({
delta:1
})
},
//登陆注册
wechatSignUp(cd){
//上锁如果正在请求接口那么就返回
if(this.data.locked){
return
}
this.data.locked=true
//注册或者登陆获取token
letcode=''
App.WxService
.login()
.then(data=>{
code=data.code
wx.setStorageSync('logincode',data.code)
returnApp.WxService.getUserInfo()
})
.then(data=>{
//请求后台登录注册接口
returnModelLogin.wechatSignUp({
encrypteData:data.encryptedData,
iv:data.iv,
rawData:encodeUnicode(data.rawData),//编码
signature:data.signature,
code:code
})
})
.then(data=>{
this.data.locked=false
if(data.data.token==''){
wx.showToast({
title:'登录失败',
icon:'none'
})
return
}
App.WxService.setStorageSync('utoken',data.data.token)
//访问后台接口获取用户信息
ModelLogin.getVipInfo({token:data.data.token}).then(res=>{
App.globalData.userInfo=res.data.userInfo
//返回上一页
this.goBack()
})
})
.catch(err=>{
this.data.locked=false
console.log(err)
})
}
})

这里的App.WxService等价于wx因为wx是回调的方式，这里使用的是promise。

先判断有没有授权，没有授权显示点击授权，有授权显示点击登录，调用的方法都是wechatSignUp，拿到wx.login的code和wx.getUserInfo的数据给后台，然后后台返回token，然后再去访问后台获取用户信息

login的逻辑大概就是这些





商城


请同意授权
请登录

为了让头号买手可以更好的为您服务


确认授权
确认登录



近期你已经授权登陆过商城
自动登录中

访问后台接口的时候在header里传token如果后台没有拿到token就返回401，前端统一拦截跳转到登陆页面

结束

关于app.js本来打算在app做拦截的，但是异步请求总是在进入页面后才拿到后台返回的数据，因为用户可能从商品详情页等其他页面进入小程序，授权后要返回进入页面，在app.js中拦截就无法返回页面了，所以就直接在页面的js里去判断，还好可以分享的页面不多所以就没有在app.js里写任何东西。第一次接触，希望以后能优化了再发文记录一下

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

小程序实现授权登陆的解决方案

热门推荐

随机推荐