第一种情况：最常用的history模式

这里根据项目出现做出总结：
1、Android手机：
android手机基本会兼容授权，但是时不时出现授权失败的情况，或者是出现授权成功，打开失败的情况。结果查找，大多都说android不需要处理直接使用href签名：

 await API.wxSign({clientId: wxAppId,url: window.location.href},signatureUrl);

但事实是什么呢？乖乖，根本没人给你说当你的某个页面需要暴露链接作为单链接引用的时候根本不行的，会让你懵逼，左检查右检查，各种查，各种console.log，最后甚至找后端吵架，哈哈，各种让你傻眼。此时你这个链接签名后执行wx.config会成功，但是当你调用sdk的时候微信会告诉你，access permission denied！反正我直接一脸懵逼。
2、IOS手机：
IOS我相信不用多说了，所有页面都不能成功授权jssdk，要么报access permission denied，要么报signature validate，要么就在调用jssdk方法（比如openLocation）的时候报参数错误，我劝各位这种情况就不要查什么原因了，完全就是history这个模式不行的，ios中只会认为第一次进入的路径就是那个，不会变的，所以呢，你们猜网上怎么说的，各种routeAfter里面一顿操作：

router.afterEach((to, from) => {  // window.__wxjs_is_wkwebview// true 时 为 IOS 设备// false时 为 安卓 设备if (window.__wxjs_is_wkwebview) {  // IOSif (window.entryUrl == '' || window.entryUrl == undefined) {var url = `${FRONT_BASE}${to.fullPath}`window.entryUrl = url    // 将后面的参数去除}getWxAuth(to.fullPath,"ios")}else {       // 安卓setTimeout(function () {getWxAuth(to.fullPath,"android")}, 500);}
})

一样的问题：他并没有告诉你，当你的某个页面需要暴露链接作为单链接引用的时候根本不行的，注意黄色背景的字，多念几遍理解一下。

总结下来：history模式授权，对于整体应用并没有问题，但是对于你要拆解，分解到不同平台去集成的情况下，建议舍去这个方案，不要使用history模式，而我们应该使用hash模式，这才是正确的选择！但是我只是建议，大家有更完美的方法，欢迎多多共享！

第二种也比较常用，hash模式

这种模式没什么可说的，直接：

 await API.wxSign({clientId: wxAppId,url: window.location.href.split('#')[0]},signatureUrl);

这种都能完美授权，完美执行wx.config，不会有问题！

第三种就是memoryHistory

这种比较少见，但是正对完整的应用比较友好，因为它的路径永远都是一个，也就是域名本身加上nginx路径组成的那一窜，对于内部的路由毫不关心，你直接授权一个即可，全局只需要授权一个地址url，但是有个弊端，这种模式不能拆分到其他地方去集成，只能在当前完整的应用下进行，扩展拆分url到其他平台使用，因为你访问具体路径的时候会直接跳转到首页，不支持链接外部使用，这个时候跳转完全是页面栈自己的事情。对于h5而言，这种方式显然只能用在需要完整打包为APP的应用上，其他场景扩展性差，不建议使用。当然这里只讨论微信js-sdk授权问题，其他不过多讨论了

总结

1、建议对于微信开发h5，同时需要使用weixin-js-sdk的情况下，使用hash模式优先考虑，其次才是其他模式。
2、微信js-sdk授权按照官方文档，他并没有说的那么细致，描述也不清楚，对微信开发文档只能这样形容【一句话文档，外加几句useless的代码，再加几个只会发链接给你的客服】，大家是否深有体会呢？结果各种踩坑以后，发现一些问题，希望能帮助正在困扰的童鞋，如果是大神，请忽略本文。这只是一些小小的发现，I hope it works for the needy！

关于vue路由模式导致微信jssdk授权问题的正确解决姿势相关推荐

解决vue路由hash模式下,微信网页授权问题
解决vue路由hash模式下,微信网页授权问题本人开发负责微信公众号端,菜单都是自定义菜单,然后每个菜单路径都是经过授权如:http://xxxx.com/ceshi/wechat/authoriz ...
vue 单页面(SPA) history模式调用微信jssdk 跳转后偶尔 “invalid signature“错误解决方案
vue 单页面(SPA) history模式调用微信jssdk 跳转后偶尔 "invalid signature"错误解决方案参考文章: (1)vue 单页面(SPA) hist ...
vue开发本地调试微信网页授权
vue开发本地调试微信网页授权相关信息: 微信开发者工具 vue-cli3 1.修改hosts文件这里可能会遇到无法修改的问题,可以通过修改权限或管理员权限打开修改修改用户权限的操作如下: 修改 ...
Vue 爬坑之旅 -- history 路由模式下微信分享爬坑总结
现在做 H5 开发,微信平台基本是一个绕不过去的坑,这里面又分为微信授权和微信分享.说它坑,主要提现在以下几个方面: 文档不够清晰详细.开发文档这块是国内所有互联网公司的通病,文档写的不清不楚,长期不 ...
vue获取微信登陆权限_Vue获取微信JSSDK授权,以及微信分享
场景 Vue获取JSSDK授权以便在微信浏览器,或者嵌在小程序里面做些小事情,如朋友/朋友圈分享,微信支付,图片上传下载等步骤一配置安全域名: 在微信公众平台对应的公众号设置里面配上相应的JS接口 ...
vue history 微信jssdk授权失败解决办法
bug再现: 前提保证后端签名都正确,我的是正确的,前端时不时会出现授权失败的情况. IOS微信访问vue history模式的页面, A页面,需要微信授权,调用jssdk使用扫描二维码接口,打开方式 ...
vue路由模式以及原理和区别
vue的路由模式一共有两种,分别是hash(哈希)和history. 区别是hash模式不会包含在http请求当中,并且hash不会重新加载页面,而使用history模式的话,如果前端的url和后端发 ...
vue路由模式实现原理
vue路由有两种模式(通过改变 URL,在不重新请求页面的情况下,更新页面视图) 一种hash模式(URL有#) 实现原理: 一种history模式(URL无#) 实现原理: 这两种模式区别看有无#
微信分享 ajax冲突,微信jssdk分享功能开发及解决ajax跨域的问题
微信JS-SDK说明文档微信JS-SDK Demo 我所要实现的分享功能要求:只要提供一段js代码给前端美工放置在静态页面等就可以实现分享功能. js代码如下: url=location.href; ...

关于vue路由模式导致微信jssdk授权问题的正确解决姿势

如何正确解决vue路由模式weixin-jssdk授权问题

第一种情况：最常用的history模式

第二种也比较常用，hash模式

第三种就是memoryHistory

总结

关于vue路由模式导致微信jssdk授权问题的正确解决姿势相关推荐

最新文章

热门文章