后端重定向到vue页面时,页面卡在默认路由的解决办法
目录
后端重定向到vue页面时,页面卡在默认路由的解决办法。
前端请求后端微信登录地址
参数:redirect_uri 后端登录成功,失败,需要绑定时重定向到 这个地址 并带上code,msg等参数
开始请求
windows.location.href = http://www.xx.com/api/wx_login?redirect_uri=http://www.xx.com/#/wx_login
这样请求肯定是不行的,因为后端接收到的 redirect_uri 实际值为 http://www.xx.com/ 是不会接收到 # 号后面的参数的,所以前端得这样改一下
windows.location.href = http://www.xx.com/api/wx_login?redirect_uri=http://www.xx.com/%23/wx_login
这时候后端接收到的redirect_uri 实际值:
redirect_uri = redirect_uri.replace('%23', '#')
后台再替换回#
登录成功:
登录失败: http://www.xx.com/#/wx_login?code=400&msg=错误信息
需要绑定微信:http://www.xx.com/#/wx_login?code=404&key=xxxxx
问题来了。如果前端的登录页面地址也是 http://www.xx.com/#/wx_login ,在打开页面时,就已经加载了,
vue的
这些方法都已经执行过一次了,再次重定向回来时上,上面的方法都不会执行了(某些手机的的浏览器会缓存,某些手机还可以执行。即使清除微信缓存都没有用,亲测!)
然后就会导致路由失效
这个时候 只要前端在改一下就好了
windows.location.href = http://www.xx.com/api/wx_login?redirect_uri=http://www.xx.com/?t=1575602302.1231/%23/wx_login
也就是在 /%23 前面加上时间戳,完美解决!
其他情况不是微信跳转的情况,只要遇到这种页面不刷新的情况,都可以这样子写!加时间戳不让浏览器缓存!