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


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 相关文章推荐
javascript 流畅动画实现原理
Sep 08 Javascript
cnblogs csdn 代码运行框实现代码
Nov 02 Javascript
js 复制或插入Html的实现方法小结
May 19 Javascript
基于jquery的inputlimiter 实现字数限制功能
May 30 Javascript
JS实现的自定义网页拖动类
Nov 06 Javascript
javascript中字体浮动效果的简单实例演示
Nov 18 Javascript
JQuery DIV 动态隐藏和显示的方法
Jun 23 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
Feb 22 Javascript
vuex进阶知识点巩固
May 20 Javascript
微信小程序实现留言板功能
Nov 02 Javascript
详解小程序如何避免多次点击,重复触发事件
Apr 08 Javascript
原生Vue 实现右键菜单组件功能
Dec 16 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怎样调用MSSQL的存储过程
2006/10/09 PHP
php线性表顺序存储实现代码(增删查改)
2012/02/16 PHP
mysqli_set_charset和SET NAMES使用抉择及优劣分析
2013/01/13 PHP
php检测文本的编码
2015/07/26 PHP
ThinkPHP5.0框架验证码功能实现方法【基于第三方扩展包】
2019/03/11 PHP
在 Laravel 6 中缓存数据库查询结果的方法
2019/12/11 PHP
javascript 隔行换色函数代码
2010/10/24 Javascript
jquery基础教程之deferred对象使用方法
2014/01/22 Javascript
js获取判断上传文件后缀名的示例代码
2014/02/19 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
2015/11/18 Javascript
简单掌握JavaScript中const声明常量与变量的用法
2016/05/21 Javascript
JavaScript 控制字体大小设置的方法
2016/11/23 Javascript
node.js中的事件处理机制详解
2016/11/26 Javascript
jQuery操作DOM_动力节点Java学院整理
2017/07/04 jQuery
jQuery中的$是什么意思及 $. 和 $().的区别
2018/04/20 jQuery
jquery更改元素属性attr()方法操作示例
2020/05/22 jQuery
关于Python如何避免循环导入问题详解
2017/09/14 Python
解决pycharm安装后代码区不能编辑的问题
2018/10/28 Python
python 在屏幕上逐字显示一行字的实例
2018/12/24 Python
利用python脚本如何简化jar操作命令
2019/02/24 Python
微信公众号token验证失败解决方案
2019/07/22 Python
Python 日志logging模块用法简单示例
2019/10/18 Python
python各层级目录下import方法代码实例
2020/01/20 Python
Python sqlite3查询操作过程解析
2020/02/20 Python
python2.7使用scapy发送syn实例
2020/05/05 Python
Pycharm中配置远程Docker运行环境的教程图解
2020/06/11 Python
python 牛顿法实现逻辑回归(Logistic Regression)
2020/10/15 Python
毕业生的自我鉴定
2013/10/29 职场文书
员工培训心得体会
2013/12/30 职场文书
客户服务经理岗位职责
2014/01/29 职场文书
理工学院学生自我鉴定
2014/02/23 职场文书
2014年计划生育协会工作总结
2014/11/14 职场文书
幼儿园教师师德承诺书
2015/04/28 职场文书
大学生志愿者心得体会
2016/01/15 职场文书
幼儿园2016圣诞节活动总结
2016/03/31 职场文书
Python使用OpenCV和K-Means聚类对毕业照进行图像分割
2021/06/11 Python