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


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计数器代码
Nov 04 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
Jun 08 Javascript
js获取指定日期前后的日期代码
Aug 20 Javascript
Jquery $when done then的用法详解
May 20 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
Jun 20 Javascript
Web打印解决方案之普通报表打印功能
Aug 29 Javascript
vue实现手机号码抽奖上下滚动动画示例
Oct 18 Javascript
vue单页缓存方案分析及实现
Sep 25 Javascript
vue实现中部导航栏布局功能
Jul 30 Javascript
微信小程序3D轮播实现代码
Sep 19 Javascript
JavaScript相等运算符的九条规则示例详解
Oct 20 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
Sep 11 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 session有效期session.gc_maxlifetime
2011/04/20 PHP
用PHP书写安全的脚本代码
2012/02/05 PHP
解析php session_set_save_handler 函数的用法(mysql)
2013/06/29 PHP
php中的PHP_EOL换行符详细解析
2013/10/26 PHP
php中字符串和正则表达式详解
2014/10/23 PHP
php实现中文转数字
2016/02/18 PHP
PHP实现RSA签名生成订单功能【支付宝示例】
2017/06/06 PHP
JS 自动完成 AutoComplete(Ajax 查询)
2009/07/07 Javascript
JavaScript中去掉数组中的重复值的实现方法
2011/08/03 Javascript
js实现文章文字大小字号功能完整实例
2014/11/01 Javascript
jQuery模拟黑客帝国矩阵效果实例
2015/06/28 Javascript
浅谈javascript中的DOM方法
2015/07/16 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
2016/05/31 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
2016/12/02 Javascript
jQuery使用Layer弹出层插件闪退问题
2016/12/22 Javascript
使用JS模拟锚点跳转的实例
2018/02/01 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
vue.js使用v-model实现父子组件间的双向通信示例
2020/02/05 Javascript
TypeScript 运行时类型检查补充工具
2020/09/28 Javascript
跟老齐学Python之不要红头文件(1)
2014/09/28 Python
在Python中使用Neo4j数据库的教程
2015/04/16 Python
python 3.6.2 安装配置方法图文教程
2018/09/18 Python
PyCharm设置每行最大长度限制的方法
2019/01/16 Python
Python根据欧拉角求旋转矩阵的实例
2019/01/28 Python
pyqt5 实现多窗口跳转的方法
2019/06/19 Python
在cmd中查看python的安装路径方法
2019/07/03 Python
Linux下通过python获取本机ip方法示例
2019/09/06 Python
tensorflow 只恢复部分模型参数的实例
2020/01/06 Python
canvas仿写贝塞尔曲线的示例代码
2017/12/29 HTML / CSS
美国猫狗药物和用品网站:PetCareRx
2017/01/05 全球购物
英国文胸专家:AmpleBosom.com
2018/02/06 全球购物
村容村貌整治方案
2014/05/21 职场文书
检讨书格式
2019/04/25 职场文书
85句关于理想的名言警句大全
2019/08/22 职场文书
导游词之西江千户苗寨
2019/12/24 职场文书
Java基础之线程锁相关知识总结
2021/06/30 Java/Android