189 8069 5689
这篇文章给大家分享的是有关如何解决小程序授权登录的问题的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
场景
微信用户可以通过搜索进入小程序
也可以通过别人分享进入小程序
进入小程序之后需要用户授权拿到用户信息进行注册
代码实现
初始化页面home页用户第一次进入小程序必须授权后台注册并登录
app.json
{
"pages": [
"pages/home/index",
"pages/login/index",
...
]
}login.js逻辑进入页面判断一下是不是授权过，判断用户是否已经授权，已经授权显示登录，没有授权显示授权，用户无论是注册还是登录用的是后台提供的同一个接口。返回token存在本地
login.js
const App = getApp()
import { loginModel } from '../../models/login.js'
import { MineModel } from '../../models/mine.js'
import { encodeUnicode } from '../../utils/index.js'
const ModelLogin = new loginModel()
const Modelmine = new MineModel()
Page({
data: {
logged: !1,
isauth: false,
locked: false
},
onLoad: function(options) {
// 返回到之前要刷新
var pages = getCurrentPages() // 获取页面栈
var prevPage = 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 外面有缓存
const token = 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
let code = ''
App.WxService
.login()
.then(data => {
code = data.code
wx.setStorageSync('logincode', data.code)
return App.WxService.getUserInfo()
})
.then(data => {
// 请求后台登录注册接口
return ModelLogin.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的逻辑大概就是这些
login.wxml