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


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 无法通过W3C验证的处理方法
Mar 09 Javascript
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
Jan 15 Javascript
JavaScript中的对象的extensible属性介绍
Dec 30 Javascript
jQuery获取当前点击的对象元素(实现代码)
May 19 Javascript
webstorm中vue语法的支持详解
May 09 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
Feb 02 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
Feb 18 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
Feb 22 Javascript
vue项目或网页上实现文字转换成语音播放功能
Jun 09 Javascript
js实现点击上传图片并设为模糊背景
Aug 02 Javascript
详解Vue中Axios封装API接口的思路及方法
Oct 10 Javascript
React中使用Vditor自定义图片详解
Dec 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框架排名
2013/07/04 PHP
从PHP的源码中深入了解stdClass类
2014/04/18 PHP
PHP如何实现订单的延时处理详解
2017/12/30 PHP
一个无限级XML绑定跨框架菜单(For IE)
2007/01/27 Javascript
jQuery 打造动态渐变按钮 详细图文教程
2010/04/25 Javascript
input 和 textarea 输入框最大文字限制的jquery插件
2011/10/27 Javascript
两种JS实现屏蔽鼠标右键的方法
2020/08/20 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
2016/06/13 Javascript
Angular实现表单验证功能
2017/11/13 Javascript
详解基于Node.js的HTTP/2 Server实践
2018/05/31 Javascript
解决vue路由后界面没有变化,但是链接有的问题
2018/09/01 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
2018/12/10 jQuery
layui问题之模拟table表格中的选中按钮选中事件的方法
2019/09/20 Javascript
微信小程序停止其他视频播放当前视频的实例代码
2019/12/25 Javascript
[51:53]完美世界DOTA2联赛决赛日 Inki vs LBZS 第二场 11.08
2020/11/10 DOTA
python单链表实现代码实例
2013/11/21 Python
Python3通过Luhn算法快速验证信用卡卡号的方法
2015/05/14 Python
python实现web方式logview的方法
2015/08/10 Python
Python工程师面试题 与Python Web相关
2016/01/14 Python
打包发布Python模块的方法详解
2016/09/18 Python
python实现ID3决策树算法
2017/12/20 Python
Python装饰器(decorator)定义与用法详解
2018/02/09 Python
Python自定义一个类实现字典dict功能的方法
2019/01/19 Python
python 数据生成excel导出(xlwt,wlsxwrite)代码实例
2019/08/23 Python
Python实现快速大文件比较代码解析
2020/09/04 Python
AmazeUI框架搭建的方法步骤(图文)
2020/08/17 HTML / CSS
美国宠物用品网站:Value Pet Supplies
2018/03/17 全球购物
美国围栏公司:Walpole Outdoors
2019/11/19 全球购物
蒂娜商店:Tiina the Store
2019/12/07 全球购物
2015年党员干部承诺书
2015/01/21 职场文书
2015年税务稽查工作总结
2015/05/26 职场文书
2016优秀青年志愿者事迹材料
2016/02/25 职场文书
2016年小学“我们的节日·中秋节”活动总结
2016/04/05 职场文书
php 获取音视频时长,PHP 利用getid3 获取音频文件时长等数据
2021/04/01 PHP
科普 | 业余无线电知识-波段篇
2022/02/18 无线电
详解TypeScript的基础类型
2022/02/18 Javascript