小程序实现授权登陆的解决方案
作者:乖摸摸头 发布时间:2024-04-17 10:03:28
前言
之前写过一个关于微信授权登陆的文章
传送门
最近在做小程序的项目,依旧是商城,又开始研究微信的登陆授权坑,第一次接触小程序,授权登陆也是一塌糊涂以后再慢慢的改进
场景
微信用户可以通过搜索进入小程序
也可以通过别人分享进入小程序
进入小程序之后需要用户授权拿到用户信息进行注册
代码实现
初始化页面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
<view class="login-container">
<view class="login" wx:if="{{ !logged }}">
<view class="app-info">
<image class="app-logo" src="./s-toplogo@2x.png" />
<text class="app-name">商城</text>
</view>
<view class="alert">
<view class="alert-title" wx:if="{{!isauth}}">请同意授权</view>
<view class="alert-title" wx:if="{{isauth}}">请登录</view>
<view class="alert-desc">
<view class="alert-text">为了让头号买手可以更好的为您服务</view>
</view>
</view>
<button type='primary' wx:if="{{!isauth}}" class="sui-f16" open-type="getUserInfo" bind:getuserinfo="wechatSignUp">确认授权</button>
<button type="primary" wx:if="{{isauth}}" class="weui-btn" bindtap="login">确认登录</button>
</view>
<view class="logged" wx:else>
<image class="logged-icon" src="./s-toplogo@2x.png" />
<view class="logged-text">近期你已经授权登陆过商城</view>
<view class="logged-text">自动登录中</view>
</view>
</view>
访问后台接口的时候在header里传token如果后台没有拿到token就返回401,前端统一拦截跳转到登陆页面
结束
关于app.js本来打算在app做拦截的,但是异步请求总是在进入页面后才拿到后台返回的数据,因为用户可能从商品详情页等其他页面进入小程序,授权后要返回进入页面,在app.js中拦截就无法返回页面了,所以就直接在页面的js里去判断,还好可以分享的页面不多所以就没有在app.js里写任何东西。第一次接触,希望以后能优化了再发文记录一下
来源:https://segmentfault.com/a/1190000017206148
猜你喜欢
- 最早大家都没有给链接加title的习惯,后来因为w3c标准普及,又集体加上了title。从一个极端走到另个极端,于是出现很多怪异现象。两方面
- 本文是对《Python Qt GUI快速编程》的第9章的扩展对话框例子Find and replace用Python3+PyQt5+Qt D
- 问题1:如何获取caller的(文件名,行号,函数名)?当新增一条log记录时,最终将调用Logger类的_log方法,这个方法首先会创建一
- 1.什么是事务:事务是一个不可分割的工作逻辑单元,在数据库系统上执行并发操作时事务是做为最小的控制单元来使用的。 他
- 用于制作自动化微信聊天图片,通过图片生成段子视频根据一个txt文档input.txtL 一路走过来好热啊
- numpy打乱数组或打乱矩阵行使用numpy.random.shuffle函数,能够打乱ndarray对象的第一维度,对于数组来说,就是整体
- MySQL 非空约束(NOT NULL)指字段的值不能为空。对于使用了非空约束的字段,如果用户在添加数据时没有指定值,数据库系统就会报错。可
- 这段时间服务器崩溃2次,一直没有找到原因,今天看到论坛发出的错误信息邮件,想起可能是MySQL的默认连接数引起的问题,一查果然,老天,默认
- 1.进入官网https://www.python.org/,点击Downloads下的Windows按钮,进入下载页面。2.如下图所示,点击
- 想使用正则表达式来获取一段文本中的任意字符,写出如下匹配规则: (.*) 结果运行之后才发现,无法获得换行之后的文本。于是查了一下手册,才发
- 内容摘要:有很多朋友虽然安装好了mysql但却不知如何使用它。在这篇文章中我们就从连接mysql、修改密码、增加用户等方面来学习一些mysq
- 本文实例讲述了python 协程中的迭代器,生成器原理及应用。分享给大家供大家参考,具体如下:1.迭代器理解迭代器:迭代器是访问可迭代对象的
- 大家好,使用 Python Flask 创建 URL 缩短器是一个有趣而简单的项目,可以帮助您深入了解 Web 开发的世界。Flask 是
- 学习vue和nodejs的过程当中,涉及到了axios,今天为了测试,写了get和post两个方法来跟node服务端交互,结果因为heade
- 以查询前20到30条为例,主键名为id 方法一: 先正查,再反查 select top 10 * from (select top 30 *
- python函数的参数类型和返回类型默认为int。如果需要传递一个float值给dll,那么需要指定参数的类型。如果需要返回一个flaot值
- 引言软件开发经历了许多阶段,如需求收集和分析、设计、软件开发、测试和发布。测试是 SDLC 不可或缺的一部分,单元测试是一种可靠的测试类型。
- 学习目标在本章中,将学习用于跟踪视频中对象的Meanshift和Camshift算法MeanshiftMeanshift背后的原理很简单,假
- 需求:1.大量csv文件,以数字命名,如1.csv、2.cvs等;2.逐个打开,对csv文件中的某一列进行格式修改;3.将更改后的内容写入新
- 项目使用Pyqt作为UI框架,使用相机线程捕捉image,并在QGraphicsView中显示,遇到以下问题:1、采集的数据为nparray