详解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 相关文章推荐
YUI的Tab切换实现代码
Apr 11 Javascript
DIY jquery plugin - tabs标签切换实现代码
Dec 11 Javascript
IE6下opacity与JQuery的奇妙结合
Mar 01 Javascript
select标记美化--JS式插件、后期加载
Apr 01 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
May 19 Javascript
一个简单的动态加载js和css的jquery代码
Sep 01 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
Oct 27 Javascript
vue.js利用Object.defineProperty实现双向绑定
Mar 09 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
Dec 19 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
Jan 20 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
Dec 17 Javascript
JS学习笔记之数组去重实现方法小结
May 29 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
中国的第一台收音机
2021/03/01 无线电
学习php设计模式 php实现原型模式(prototype)
2015/12/07 PHP
PHP房贷计算器实例代码,等额本息,等额本金
2017/04/01 PHP
基于Web标准的UI组件 — 树状菜单(2)
2006/09/18 Javascript
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
2007/02/05 Javascript
ExtJS扩展 垂直tabLayout实现代码
2009/06/21 Javascript
为超链接加上disabled后的故事
2010/12/10 Javascript
javascript中xml操作实现代码
2011/11/21 Javascript
Nodejs sublime text 3安装与配置
2014/06/19 NodeJs
浅谈jQuery 选择器和dom操作
2016/06/07 Javascript
js移动端图片压缩上传功能
2020/08/18 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
2018/02/21 Javascript
Vue常用指令详解分析
2018/08/19 Javascript
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
2019/09/21 Javascript
详解js location.href和window.open的几种用法和区别
2019/12/02 Javascript
Vue使用虚拟dom进行渲染view的方法
2019/12/26 Javascript
vue实现五子棋游戏
2020/05/28 Javascript
[00:44]华丽开场!DOTA2勇士令状带来全新对阵画面
2019/05/15 DOTA
Python实现把utf-8格式的文件转换成gbk格式的文件
2015/01/22 Python
Python连接PostgreSQL数据库的方法
2016/11/28 Python
Python入门_学会创建并调用函数的方法
2017/05/16 Python
基于python指定包的安装路径方法
2018/10/27 Python
对python中dict和json的区别详解
2018/12/18 Python
django的ORM模型的实现原理
2019/03/04 Python
django的ORM操作 删除和编辑实现详解
2019/07/24 Python
python实现发送form-data数据的方法详解
2019/09/27 Python
python定间隔取点(np.linspace)的实现
2019/11/27 Python
10款最佳Python开发工具推荐,每一款都是神器
2020/10/15 Python
英国和爱尔兰的自炊式豪华度假小屋:Rural Retreats
2018/06/08 全球购物
医学护理毕业生自荐信
2013/11/07 职场文书
中学清明节活动总结
2014/07/04 职场文书
劳模先进事迹材料
2014/12/24 职场文书
大学生学期个人总结
2015/02/12 职场文书
居住证明范文
2015/06/17 职场文书
Netty分布式客户端接入流程初始化源码分析
2022/03/25 Java/Android