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

作者:乖摸摸头 时间: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

标签:小程序,授权,登陆
0
投稿

猜你喜欢

  • 对python字典过滤条件的实例详解

    2022-01-28 14:02:30
  • tensorflow之自定义神经网络层实例

    2022-05-26 07:05:27
  • Python2和Python3中@abstractmethod使用方法

    2021-12-29 08:55:36
  • python调用并链接MATLAB脚本详解

    2021-12-11 07:16:42
  • 详细介绍Scrapy shell的使用教程

    2022-04-18 03:35:39
  • window.top[_CACHE]实现多个jsp页面共享一个js对象

    2023-07-18 09:25:14
  • Ajax+asp应用实例 注册模块,表单提交

    2011-04-08 10:47:00
  • 一个mysql死锁场景实例分析

    2024-01-16 21:59:47
  • go语言定时器Timer及Ticker的功能使用示例详解

    2024-02-09 09:17:45
  • python如何往列表头部和尾部添加元素

    2021-12-17 07:05:17
  • python Matplotlib画图之调整字体大小的示例

    2023-03-27 09:43:30
  • JavaScript编写点击查看大图的页面半透明遮罩层效果实例

    2024-02-24 03:33:08
  • SpringBoot集成JPA持久层框架,简化数据库操作

    2024-01-16 11:42:38
  • Django 多对多字段的更新和插入数据实例

    2022-09-11 01:17:04
  • JS比较两个数值的大小实例

    2024-04-17 10:41:03
  • 通过定位控制信息列表下往上的增加

    2008-06-30 14:27:00
  • Python通用验证码识别OCR库ddddocr的安装使用教程

    2021-11-04 21:21:27
  • Python编程图形库之Pillow使用方法讲解

    2022-04-07 06:10:57
  • Python Web框架Flask信号机制(signals)介绍

    2022-12-01 13:52:23
  • python中Django文件上传方法详解

    2021-12-31 13:40:41
  • asp之家 网络编程 m.aspxhome.com