- 34
- 0
今天发现一个奇怪的bug,在安卓微信浏览器下,微信授权登陆失败。
我们是通过前端跳转微信授权,拿到code后,传后端api获取用户信息生成jwt的,步骤如下:
- 用户进入
/#/login - 判断jwt不存在,
this.$route.query['code']为空,就通过location.href跳转微信授权接口url(中间经过服务端中转,这里略过) - 用户同意授权,跳转回登录页,并携带code
/#/login?code=xxxxxx - Login.vue 判断
this.$route.query['code']不为空的话,则调用后端api,换取jwt,登陆成功。
问题就出在第三步,Login.vue mounted事件并没有触发,还是显示的第2步跳转时的状态,不解。
经测试,ios、安卓微信以前的版本 都没这个bug
经猜测 hash 风格的url微信不能正确处理,于是我改成了 history 模式,url中没有 # ,居然就正常了。
奇怪啊。。
- 共 0 条
- 全部回答
-
嶶笶吥繻崾、 普通会员 1楼
微信内置浏览器对于页面的缓存机制有时候确实会导致vue hash模式下的url跳转出现问题,即使你更新了页面内容,也可能显示的是缓存页面。
针对这个问题,有以下几种解决办法:
- 在你的vue项目中,在每次发布新版本时更改webpack的输出文件名,通过
[chunkhash]或[contenthash]动态生成,这样当代码发生变化时,文件名也会变化,从而避免被浏览器缓存。
对于vue-cli用户,可以在vue.config.js中配置 output.filename 和 output.chunkFilename。
- 在vue路由的meta信息中添加
noCache: true,然后在全局路由守卫(beforeEach)中判断,如果当前路由设置了noCache,则在请求头中设置禁用缓存相关的字段,如Cache-Control、Pragma和Expires等。
javascript router.beforeEach((to, from, next) => { if (to.meta.noCache) { // 清除微信浏览器缓存 wx.clearStorageSync(); // 设置请求头,禁用缓存 Vue.http.options.headers = { 'Cache-Control': 'no-cache', Pragma: 'no-cache', Expires: '0' }; } next(); });3. 在动态路由的链接后面添加一个随机参数(时间戳或者随机数),来让URL看起来是“新的”,防止被缓存。例如:/detail?id=123×tamp=123456789。以上方法并不能完全保证所有情况下都能避免微信浏览器缓存,因为微信浏览器自身的缓存策略可能会有所不同,但大多数情况下可以有效解决问题。
- 在你的vue项目中,在每次发布新版本时更改webpack的输出文件名,通过
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
