微信vue路由跳转兼容_Vue微信公众号开发踩坑记录
需求
微信授权登录(基于公众号的登录方案)
接入JS-SDK实现图片上传,分享等功能
现状及难点
采用的Vue框架,前后端分离模式(vue工程仅作为客户端),用户通过域名访问的是客户端,但是微信授权中涉及签名和token校验依赖服务端
JS-SDK需要向服务端获取签名,且获取签名中需要的参数包括所在页面的url,但由于单页应用的路由特殊,其中涉及到iOS和android微信客户端浏览器内核的差异性导致的兼容问题
解决方案
授权登录
本人将授权流程设计如下:
详细说明:
用户访问网站主域名
vue客户端(domain/)接收请求,在路由解析前判断用户是否登录(比如检查cookie);
如果没有登录,则通过api获取微信授权地址,获取后跳转到微信授权页面;
用户确认授权,微信服务器发起回调请求,这时回调到服务器端(domain/api/xxx)
服务器端保存用户信息,进行注册登录操作(记录cookie),重定向到vue客户端(domain/)
重复第一步,授权登录成功
踩坑记录:
以下是另一个授权方案
其实如果只实现授权登录到话,这个方案是可以的,而且也很清晰,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是没法签名校验成功的!
重要的事情得说三遍啊
在我另外一篇文章中对js-sdk签名做了更多的介绍,可以移步到vue微信公众号开发踩坑记录(2)
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
结语
由于本人文笔一般,思维的表达估计不到位,见解也是浅尝辄止,所以如果看官您有疑惑的地方或者有歧义欢迎来和本人交流。为了方便大家互相沟通,本人也创建了一个vue公众号开发的qq群,欢迎加入和大家一起分享开发心得,qq群号:130903919
微信vue路由跳转兼容_Vue微信公众号开发踩坑记录相关推荐
- 微信vue路由跳转兼容_vue使用感受(二)组件间跳转
想要看代码高亮的可以去我的微信公众号(pearapple_2015)查看. 昨天我们聊了一下vue的组件间传值,今天来讨论下我遇到的第二个问题组件间跳转.在不使用前端框架的时候,如果我们要点击菜单跳转 ...
- vue在微信里面的兼容问题_详解Vue微信公众号开发踩坑全记录
本文介绍了Vue微信公众号开发踩坑全记录,分享给大家,也给自己留个笔记. 需求 微信授权登录(基于公众号的登录方案) 接入JS-SDK实现图片上传,分享等功能 现状及难点 采用的Vue框架,前后端分 ...
- 微信公众号开发---踩坑日记
现在开始学习微信公众号开发,所以会记录我在这个过程中遇到的坑点和新手对于微信文档理解不清的问题. 1.微信上面的操作都是采用接口的形式开发 在这里面难免会对微信开发存在不理解,因为公众号开发的具体修改 ...
- 微信公众号开发踩坑指南(3)——公众号返回超链接点击跳转并自动关闭
前段时间产品提了一个听起来很奇葩的需求,其实做起来也感觉很奇葩. 公众号在触发某些事件后,返回给用户具体的文案回复,但这个文案回复需要带超链接的,在用户点击超链接之后做一些CURD操作并改变改用户的状 ...
- vue路由跳转权限_vue权限路由实现方式总结
使用全局路由守卫 实现 前端定义好路由,并且在路由上标记相应的权限信息 const routerMap = [ { path: '/permission', component: Layout, re ...
- 微信公众号服务器配置但没有回调,微信公众号 “服务器配置” 踩坑记
前言 今天工作的时候,碰到一个极其无语的关于微信公众号的坑,为此,我语言攻击了腾讯的机器人客服.然而并没有卵用...万万没想到,我还是解决了这个问题,并记录下踩坑经历,希望能帮到一些朋友吧. 背景 今 ...
- prepay id为空php,微信公众号支付踩坑笔记
微信公众号支付,简单说主要分为如下几个步骤. 1.openId的获取 openId是微信用户与特定公众号对应关系的记录. 1.1设置回调域名 官方解释:用户在网页授权页同意授权给公众号后,微信会将授权 ...
- 微信公众号开发小坑:确认访问的微信是否为已关注公众号,秘钥使用全局access_token不能使用局部变量access_token
环境说明: 1.项目功能:年会抽奖活动开发,子功能:获取客户的相对公众号的唯一oppenid,然后确认是否关注本公众号,关注则获取客户信息后发抽奖券保存,否则先关注微信公众号: 2.java环境:SS ...
- vue路由跳转子组件_vue跳转到子路由子路由的组件页面无法滚动
问题描述 最近在用vue仿qq音乐,写了四个基础组件:推荐,歌手,排行,搜素. 歌手组件是获取一个歌手列表,点击歌手跳转到子路由,歌手的所有歌曲singer-detail组件,singer-detai ...
最新文章
- opencv上gpu版surf特征点与orb特征点提取及匹配实例
- VirtualBox中linux和windows建立桥接
- 迭代器、生成器、装饰器
- java创建请求拦截器_80.简单Retrofit+RxJava+日志拦截器结合使用
- Python学习笔记:Io编程序列化
- python代码查询_python 查询代码量
- 关于ecshop模板更新版本的解决方法(三)
- LinkedHashMap 底层分析
- Java面试知识点之线程篇(二)
- python调用window dll和linux so例子
- 2022考研【王道计算机408】【天勤计算机408】数据结构+操作系统+计算机组成原理+计算机网络
- 需求分层-KANO模型解读
- 第七讲项目3-编制三角函数表
- 成语归类大全(留着,孩子有用的)
- Cannot unpack file C:\Users\ADMINI~1\AppData\Local\Temp\pip-ilsapnxq-unpack\simple.htm
- 非wait线程即时唤醒epoll_wait
- Scratch(七):圣诞节快乐!
- 5,10,15,20-四(五氟苯基)锰卟啉(F20TPPMnCl);齐岳生物供应四—(对甘—缬二肽苯基)卟啉(H2L)及其金属配合物MnLCl,FeLCl,CoL,NiL,CuL,ZnL
- 永磁同步电机滞环电流控制
- P2P(1)P2P下载
热门文章
- opencv4.1无法加载python-cnn模型,编译第三方库libtensorflow_cc.so巨坑
- 超详细易理解的HTTPS(易上手哦)
- 实例:用C#.NET手把手教你做微信公众号开发(19)--使用微信支付转账到微信粉丝零钱账户
- drag与drop事件
- WoShop跨境电商国际支付Paypal支付商城全开源无加密商城源码
- 跨境电商未来将合规化发展——扬帆牧哲
- 触摸屏单个按键远程控制led
- 终于来了!新版本M4压不住枪了?刺激战场雪地地图最强灵敏度
- AirDisk存宝 【S3\S6简易使用说明】
- MongoDB——聚合管道之$match和$count操作