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


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 相关文章推荐
YUI 读码日记之 YAHOO.lang.is*
Mar 22 Javascript
Microsoft Ajax Minifier 压缩javascript的方法
Mar 05 Javascript
火狐textarea输入法的bug的触发及解决
Jul 24 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
Feb 13 Javascript
jQuery带进度条全屏图片轮播特效代码分享
Jun 28 Javascript
跟我学习javascript的prototype原型和原型链
Nov 18 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
May 09 Javascript
Jquery $when done then的用法详解
May 20 Javascript
微信小程序使用request网络请求操作实例
Dec 15 Javascript
vue 实现复制内容到粘贴板clipboard的方法
Mar 17 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
May 08 Javascript
Taro小程序自定义顶部导航栏功能的实现
Dec 17 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
火车采集器 免费版使出收费版本功能实现原理
2009/09/17 PHP
PHP如何抛出异常处理错误
2011/03/02 PHP
关于zend studio 出现乱码问题的总结
2013/06/23 PHP
PHP采用curl模仿用户登陆新浪微博发微博的方法
2014/11/07 PHP
理解php依赖注入和控制反转
2016/05/11 PHP
Linux php 中文乱码的快速解决方法
2016/05/13 PHP
如何取得中文输入的真实长度?
2006/06/24 Javascript
Extjs显示从数据库取出时间转换JSON后的出现问题
2012/11/20 Javascript
jquery封装的对话框简单实现
2013/07/21 Javascript
javascript显示用户停留时间的简单实例
2013/08/05 Javascript
jQuery实现移动端滑块拖动选择数字效果
2015/12/24 Javascript
checkbox批量选中,获取选中项的值的简单实例
2016/06/28 Javascript
微信小程序 引用其他js文件实现代码
2017/02/22 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
2018/08/13 Javascript
JS实现简单贪吃蛇小游戏
2020/10/28 Javascript
[05:01]3.19DOTA2发布会 我们都是刀塔人
2014/03/25 DOTA
web.py在模板中输出美元符号的方法
2014/08/26 Python
Python导入txt数据到mysql的方法
2015/04/08 Python
Django实现组合搜索的方法示例
2018/01/23 Python
Ubuntu下升级 python3.7.1流程备忘(推荐)
2018/12/10 Python
python3使用QQ邮箱发送邮件
2020/05/20 Python
对pyqt5中QTabWidget的相关操作详解
2019/06/21 Python
Django在admin后台集成TinyMCE富文本编辑器的例子
2019/08/09 Python
Python如何实现定时器功能
2020/05/28 Python
20行Python代码实现一款永久免费PDF编辑工具的实现
2020/08/27 Python
python 绘制场景热力图的示例
2020/09/23 Python
python 实现简单的计算器(gui界面)
2020/11/11 Python
浅谈html5 响应式布局
2014/12/24 HTML / CSS
英国奢侈品网站:MatchesFashion
2016/12/16 全球购物
请用用Java代码写一个堆栈
2012/01/26 面试题
班组长安全职责
2014/01/05 职场文书
餐厅楼面主管岗位职责范本
2014/02/16 职场文书
工程承包协议书
2014/04/22 职场文书
2016党性教育学习心得体会
2016/01/21 职场文书
python 中的@运算符使用
2021/05/26 Python
Oracle删除归档日志及添加定时任务
2022/06/28 Oracle