vue+微信公众号开发 网页授权返回url路径中带#不识别,无法授权解决方案
作者:鹏仔先生日期:2020-06-03 11:25:33浏览:3530分类:JavaScript
早期文章,年少轻狂,懂得少,下面文章已经废除,授权直接去除#就行。
带个#可真是坑啊!!!
第一次开发微信公众号,原本看起来并不复杂,前端负责调接微信接口的地方很少,为了安全起见,大部分接口都是由后端处理,前端只需负责调通后端接口即可,当然还有少部分需要前端来处理。
在微信公众号开发中,网页授权第一步需要 用户同意授权,获取code ,微信官方提供的获取code接口如下(具体接口介绍请查看微信开发者文档)
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
其中 redirect_uri 是我们需要拼接的路径地址,通过走微信接口,最后又返回到拼接的地址,从而拿到code,当然我们肯定要做的是从哪个页面进入获取到信息之后,再次返回到本页面,但是vue生成的url链接地址,路径是带有一个#,
所以会提示以下错误
然后,百度搜索去除#解决方案,基本都是让前端把vue的hash模式改为history模式,再去,然后再让后端去配置nignx,当然,配置好了之后,确实可以不带#访问了,但是问题又来了,第一次路由跳转过去,不带#是很完美的可以正常访问,但是页面一但刷新,就成404了,找不到文件目录了。
后来想了半天,掉了几根头发,就搞了一个中间页,反正获取信息主要是需要拿到code,在返回到当前页面就行,案例如下
在当前用户打开页面,我们就给存储一些当前页面的url
mounted() { // 用户每次访问,存储下当前页面的url,用于微信授权接口返回url localStorage.setItem("href", window.location.href); },
接着我们再去执行文章刚开头所说的微信拼接url接口,当然,这个url我们得自己单独写一个页面,并将页面地址拼接到微信返回url接口中,只需两句js代码即可
<script> localStorage.setItem('code',location.search.split("=")[1].match(/(\S*)&/)[1]); window.location.href = localStorage.href; </script>
第一句JS代码是我写的截取code的值,并存储,第二句是打开之前用户访问页面的url,这样,我们就可以成功的拿到code,并且返回到当前页面。
拿到code,你是不是可以为所欲为了...
但是,解决了一个,又出来一个,手机底部自带返回,当走完接口,返回到本页面时候,用户给你再按返回...(还没去解决,有空再更新博客)
猜你还喜欢
- 09-14 nvm常用命令有哪些?nvm如何切换node版本?nvm如何下载node?
- 08-19 使用HBuilderX将vue或H5项目打包app
- 07-15 小程序嵌入网页向小程序跳转并传参,微信小程序中实现公众号授权获取openId
- 07-13 vue中实现文件批量打包压缩下载(以及下载跨域问题分析)
- 07-08 uniapp调用地图,进行位置查询,标记定位
- 11-05 js截取字符串前几位或者截取字符串后几位
- 10-25 js替换字符串某个字符,js修改字符串中指定字符
- 10-20 uniapp中text-indent不起作用,uniapp首行缩进不管用如何解决?
- 09-26 vue给单独组建的body添加类名
- 08-12 elemtnui 表格如何修改某行文字颜色
- 08-03 vue中调用百度地图 获取经纬度
- 07-09 uniapp小程序实现录音 uniapp小程序长按录音 点击播放等功能(CSS实现语音音阶动画效果)
取消回复欢迎 你 发表评论:
- 搜索
- 随机tag
暂无评论,来添加一个吧。