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


Posted in Javascript onDecember 02, 2018

前言

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

传送门

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

场景

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

代码实现

初始化页面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里写任何东西。第一次接触,希望以后能优化了再发文记录一下

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Js中使用hasOwnProperty方法检索ajax响应对象的例子
Dec 08 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
Feb 06 Javascript
基于jQuery实现自动轮播旋转木马特效
Nov 02 Javascript
JavaScript缓冲运动实现方法(2则示例)
Jan 08 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
Jan 21 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
May 09 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
Sep 09 Javascript
jQuery弹出窗口打开链接的实现代码
Dec 24 Javascript
深入理解node.js之path模块
May 03 Javascript
深入理解Puppeteer的入门教程和实践
Mar 05 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
Mar 14 Javascript
Web应用开发TypeScript使用详解
May 25 Javascript
mpvue 单文件页面配置详解
Dec 02 #Javascript
Vuejs监听vuex中值的变化的方法示例
Dec 02 #Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
Dec 02 #Javascript
在移动端使用vue-router和keep-alive的方法示例
Dec 02 #Javascript
Angular6 Filter实现页面搜索的示例代码
Dec 02 #Javascript
GOJS+VUE实现流程图效果
Dec 01 #Javascript
JavaScript实现简单轮播图效果
Dec 01 #Javascript
You might like
PHP中几个可以提高运行效率的代码写法、技巧分享
2014/08/21 PHP
以实例全面讲解PHP中多进程编程的相关函数的使用
2015/08/18 PHP
thinkphp3.2实现跨控制器调用其他模块的方法
2017/03/14 PHP
PHP实现对图片的反色处理功能【测试可用】
2018/02/01 PHP
学习ExtJS fit布局使用说明
2009/10/08 Javascript
5款JavaScript代码压缩工具推荐
2014/07/07 Javascript
JQuery对表单元素的基本操作使用总结
2014/07/18 Javascript
jQuery实现的登录浮动框效果代码
2015/09/26 Javascript
js编写贪吃蛇的小游戏
2020/08/24 Javascript
Node.js的文件权限及读写flag详解
2016/10/11 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
2019/07/29 Javascript
微信小程序通过一个json实现分享朋友圈图片
2019/09/03 Javascript
微信小程序使用 vant Dialog组件的正确方式
2020/02/21 Javascript
Python中声明只包含一个元素的元组数据方法
2014/08/25 Python
python下调用pytesseract识别某网站验证码的实现方法
2016/06/06 Python
python中执行shell的两种方法总结
2017/01/10 Python
Python3爬虫学习入门教程
2018/12/11 Python
Python3+Appium安装使用教程
2019/07/05 Python
Python图像处理模块ndimage用法实例分析
2019/09/05 Python
Django实现图片上传功能步骤解析
2020/04/22 Python
Python 里最强的地图绘制神器
2021/03/01 Python
html2canvas把div保存图片高清图的方法示例
2018/03/05 HTML / CSS
女儿十岁生日答谢词
2014/01/27 职场文书
自荐信的格式
2014/03/10 职场文书
优秀团干部个人事迹
2014/05/29 职场文书
团队精神口号
2014/06/06 职场文书
四风剖析查摆对照检查材料思想汇报
2014/09/24 职场文书
个人委托书范本汇总
2014/10/01 职场文书
2014最新预备党员思想汇报范文:中国梦,我的梦
2014/10/25 职场文书
专业技术职务聘任证明
2015/03/02 职场文书
2015大学自主招生自荐信范文
2015/03/04 职场文书
接待员岗位职责范本
2015/04/15 职场文书
基于python的matplotlib制作双Y轴图
2021/04/20 Python
Ajax实现三级联动效果
2021/10/05 Javascript
python数字类型和占位符详情
2022/03/13 Python
java获取一个文本文件的编码(格式)信息
2022/09/23 Java/Android