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


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 相关文章推荐
jsPDF导出pdf示例
May 02 Javascript
jquery对table中各数据的增加、保存、删除操作示例
May 14 Javascript
JavaScript 变量、作用域及内存
Apr 08 Javascript
js实现汉字排序的方法
Jul 23 Javascript
jquery实现的Accordion折叠面板效果代码
Sep 02 Javascript
JavaScript、C# URL编码、解码总结
Jan 21 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
Feb 19 Javascript
基于React+Redux的SSR实现方法
Jul 03 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
Aug 08 Javascript
基于Vue 撸一个指令实现拖拽功能
Oct 09 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
vue学习笔记之给组件绑定原生事件操作示例
Feb 27 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迭代与递归实现无限级分类
2017/08/28 PHP
javascript 操作select下拉列表框的一点小经验
2010/03/20 Javascript
js动态加载以及确定加载完成的代码
2011/07/31 Javascript
url参数中有+、空格、=、%、&amp;、#等特殊符号的问题解决
2013/05/15 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
2015/03/26 Javascript
JavaScript整除运算函数ceil和floor的区别分析
2015/04/14 Javascript
js获取新浪天气接口的实现代码
2016/06/06 Javascript
Angular页面间切换及传值的4种方法
2016/11/04 Javascript
简单实现jQuery级联菜单
2017/01/09 Javascript
angularJS深拷贝详解
2017/03/23 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
2017/08/09 jQuery
vuex实现登录状态的存储,未登录状态不允许浏览的方法
2018/03/09 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
2018/03/19 Javascript
vue.js element-ui tree树形控件改iview的方法
2018/03/29 Javascript
JS实现的合并多个数组去重算法示例
2018/04/11 Javascript
基于Vue实现平滑过渡的拖拽排序功能
2019/06/12 Javascript
为react组件库添加typescript类型提示的方法
2020/06/15 Javascript
jQuery 移除事件的方法
2020/06/20 jQuery
.netcore+vue 实现压缩文件下载功能
2020/09/24 Javascript
Python同时向控制台和文件输出日志logging的方法
2015/05/26 Python
Python 数据结构之旋转链表
2017/02/25 Python
Python语言的变量认识及操作方法
2018/02/11 Python
对Python 文件夹遍历和文件查找的实例讲解
2018/04/26 Python
解决Django migrate No changes detected 不能创建表的问题
2018/05/27 Python
Python从list类型、range()序列简单认识类(class)【可迭代】
2019/05/31 Python
eBay德国站:eBay.de
2017/09/14 全球购物
一些Solaris面试题
2015/12/22 面试题
毕业生就业自荐书
2013/12/15 职场文书
集团公司总经理岗位职责
2013/12/20 职场文书
幼儿园中班新学期寄语
2014/01/18 职场文书
超市端午节活动方案
2014/01/23 职场文书
股权转让协议书
2014/12/07 职场文书
党员年度个人总结
2015/02/14 职场文书
2016廉洁从业学习心得体会
2016/01/19 职场文书
聘任书的格式及模板
2019/10/28 职场文书
php双向队列实例讲解
2021/11/17 PHP