详解Vue微信公众号开发踩坑全记录


Posted in Javascript onAugust 21, 2017

本文介绍了Vue微信公众号开发踩坑全记录,分享给大家,也给自己留个笔记。

需求

  • 微信授权登录(基于公众号的登录方案)
  • 接入JS-SDK实现图片上传,分享等功能

现状及难点

  • 采用的Vue框架,前后端分离模式(vue工程仅作为客户端),用户通过域名访问的是客户端,但是微信授权中涉及签名和token校验依赖服务端
  • JS-SDK需要向服务端获取签名,且获取签名中需要的参数包括所在页面的url,但由于单页应用的路由特殊,其中涉及到IOS和android微信客户端浏览器内核的差异性导致的兼容问题

解决方案

授权登录

授权流程如下:

详解Vue微信公众号开发踩坑全记录

详细说明:

  1. 用户访问网站主域名
  2. vue客户端(domain/)接收请求,在路由解析前判断用户是否登录(比如检查cookie);
  3. 如果没有登录,则通过api获取微信授权地址,获取后跳转到微信服务端授权页面;
  4. 用户确认授权,微信服务器发起回调请求,这时需要回调到服务器端(domain/api/xxx)
  5. 服务器端保存用户信息,进行注册登录操作(记录cookie),重定向到vue客户端(domain/)
  6. 重复第一步,授权登录成功

踩坑记录:

以下是一个错误授权方案

详解Vue微信公众号开发踩坑全记录

这个方案为什么错误呢?其实如果只实现授权登录到话,这个方案是可以的,而且也很清晰,vue客户端单方面在服务器和微信服务器之间进行通信,微信服务器不能直接和服务器通信。这种方案的坑在于当微信授权回调时会携带一个code参数,该参数会污染vue路由导致ios上进行JS-SDK签名时失败(后续会具体描述这个问题)

JS-SDK签名

对于签名,官方是这么说的

所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用

vue中路由有history和hash两种模式;在history模式下,理想的设计方案是,当进入到需要用到JS-SDK组件时,获取以下当前url(也就是通过 location.href.split(‘#')[0]获得到的地址)传递到服务端进行签名,应该就没问题了,但是IOS获取的url并不是调用微信js的时候所在页面的地址,而是进入到网站第一个页面的地址。

网上查询到一个方案是针对ios设备进入页面时先将当前url记录下来,到授权页面时将记录的url传递给服务端进行签名。该方案经实践是可行的,妈妈再也不用担心我的网址很丑很难看啦。

另外一个方案就是使用hash模式,这种模式下,url永远都只是主域名地址,省去了传递url的烦恼,也没必要处理兼容,所以如果不建议路由中有#的话,该方案应该是首选方案。

这里还有一个深坑,那就是如果授权方案采用了上述中的vue客户端处理回调的方式,那么ios将永远无法签名成功,为什么呢,因为这种方案路由通常是这样子的:

http://domain.com/?code=xxxxxx&stat=#/xxx

这种路由中带了参数的url是没法签名校验成功的!
这种路由中带了参数的url是没法签名校验成功的!
这种路由中带了参数的url是没法签名校验成功的!
重要的事情得说三遍啊

Coding

任何不上代码的吹逼都是耍流氓,这里笔者分享下在vue中具体怎么coding的。

微信授权登录

笔者在项目中使用的vue-router进行路由控制,使用了vuex记录用户登录信息,但是由于vuex中存储的内容在页面刷新后会丢失,所以服务端同时也写了用户登录状态到cookie中,vue中需要通过这两个条件进行登录判断,不多BB,直接看代码吧

// ... other code

router.beforeEach((to, from, next) => {
 if ((!VueCookie.get('user') && !store.state.userInfo)) {
  // 第一次访问
  console.log('授权登录')
  // 跳转到微信授权页面,微信授权地址通过服务端获得
  axios.post('/api/login').then(res => {
   var data = res.data
   if (data.code === 100) {
    window.location.href = data.data
   }
  })
 } else if (!store.state.userInfo) {
  // 刷新页面,获取数据存入vuex
  axios.get('/api/currentuser').then(res => {
   if (res.data.code === 100) {
    store.dispatch('setUserInfo', res.data.data)
    next()
   }
  })
  console.log('cookie生效期内登录')
  next()
 } else {
  // 已经登录
  console.log('已登录')
  next()
 }
})

//... other code

history模式下的JS-SDK签名

在入口文件中将当前url存入vuex

// ... other code
router.beforeEach((to, from, next) => {
 document.title = to.meta.title
 // 处理jssdk签名,兼容history模式
 if (!store.state.url) {
  store.commit('setUrl', document.URL)
 }
 // ... other code

在需要获取签名的组件中获取并进行配置

// ... other code
created () {
   var sef = this
   var url = ''
   // 判断是否是ios微信浏览器
   if (window.__wxjs_is_wkwebview === true) {
    url = this.$store.state.url.split('#')[0]
   } else {
    url = window.location.href.split('#')[0]
   }
   this.$http.get('/api/jssdk?url=' + url).then(function (res) {
    sef.lists = res.data.data
    hmTools.wechact(sef.lists, sef) //js-sdk配置
   })
  }
// ...other code

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js的for循环获取radio选中的值
Oct 21 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
Mar 28 Javascript
jQuery中val()方法用法实例
Dec 25 Javascript
JS模式之简单的订阅者和发布者模式完整实例
Jun 30 Javascript
js实现TAB切换对应不同颜色的代码
Aug 31 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
Jun 13 Javascript
Bootstrap实现登录校验表单(带验证码)
Jun 23 Javascript
Node.js中路径处理模块path详解
Nov 14 Javascript
jquery-mobile基础属性与用法详解
Nov 23 Javascript
一种angular的方法级的缓存注解(装饰器)
Mar 13 Javascript
微信小程序实现刷脸登录
May 25 Javascript
详解Vue路由自动注入实践
Apr 17 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
Aug 21 #Javascript
Vue编写多地区选择组件
Aug 21 #Javascript
使用vue制作FullPage页面滚动效果
Aug 21 #Javascript
详解Layer弹出层样式
Aug 21 #Javascript
JS数组操作之增删改查的简单实现
Aug 21 #Javascript
JS实现评价的星星功能
Aug 20 #Javascript
详解A标签中href=""的几种用法
Aug 20 #Javascript
You might like
解析php多线程下载远程多个文件
2013/06/25 PHP
PHP常用技术文之文件操作和目录操作总结
2014/09/27 PHP
PHP CURL实现模拟登陆并上传文件操作示例
2020/01/02 PHP
JS 统计时间
2021/03/09 Javascript
对象特征检测法判断浏览器对javascript对象的支持
2009/07/25 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
2011/01/11 Javascript
JS文本框不能输入空格验证方法
2013/03/19 Javascript
js实现图片轮换效果代码
2013/04/16 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
2013/05/17 Javascript
JSON 数字排序多字段排序介绍
2013/09/18 Javascript
JS 实现导航栏悬停效果
2013/09/23 Javascript
js实现交换运动效果的方法
2015/04/10 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
2015/08/10 Javascript
JavaScript生成SQL查询表单的方法
2015/08/13 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
2015/09/04 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
2016/05/15 Javascript
浅析JavaScript Array和string的转换(推荐)
2016/05/20 Javascript
基于JS代码实现图片在页面中旋转效果
2016/06/16 Javascript
详解JavaScript树结构
2017/01/09 Javascript
微信小程序实现带刻度尺滑块功能
2017/03/29 Javascript
简单谈谈关于 npm 5.0 的新坑
2017/06/08 Javascript
Vue Element使用icon图标教程详解(第三方)
2018/02/07 Javascript
详解html-webpack-plugin插件(用法总结)
2018/09/12 Javascript
video.js添加自定义组件的方法
2020/12/09 Javascript
[03:21]辉夜杯主赛事 12月25日TOP5
2015/12/26 DOTA
[48:41]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
Python元组及文件核心对象类型详解
2018/02/11 Python
PyQt5+Caffe+Opencv搭建人脸识别登录界面
2019/08/28 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
美国隐形眼镜销售网站:ContactsDirect
2017/10/28 全球购物
银行演讲稿范文
2014/01/03 职场文书
4s店销售经理岗位职责
2014/07/19 职场文书
大学生上课迟到检讨书
2014/10/15 职场文书
公司中层管理培训心得体会
2016/01/11 职场文书
学校2016年圣诞节活动总结
2016/03/31 职场文书
多属性、多分类MySQL模式设计
2021/04/05 MySQL