账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    安卓微信最新版6.6.7浏览器vue hash模式url跳转被缓存
    34
    0

    今天发现一个奇怪的bug,在安卓微信浏览器下,微信授权登陆失败。

    我们是通过前端跳转微信授权,拿到code后,传后端api获取用户信息生成jwt的,步骤如下:

    1. 用户进入 /#/login
    2. 判断jwt不存在,this.$route.query['code'] 为空,就通过 location.href 跳转微信授权接口url(中间经过服务端中转,这里略过)
    3. 用户同意授权,跳转回登录页,并携带code /#/login?code=xxxxxx
    4. Login.vue 判断 this.$route.query['code'] 不为空的话,则调用后端api,换取jwt,登陆成功。

    问题就出在第三步,Login.vue mounted事件并没有触发,还是显示的第2步跳转时的状态,不解。

    经测试,ios、安卓微信以前的版本 都没这个bug

    经猜测 hash 风格的url微信不能正确处理,于是我改成了 history 模式,url中没有 # ,居然就正常了。

    奇怪啊。。

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 嶶笶吥繻崾、 普通会员 1楼

      微信内置浏览器对于页面的缓存机制有时候确实会导致vue hash模式下的url跳转出现问题,即使你更新了页面内容,也可能显示的是缓存页面。

      针对这个问题,有以下几种解决办法:

      1. 在你的vue项目中,在每次发布新版本时更改webpack的输出文件名,通过 [chunkhash][contenthash] 动态生成,这样当代码发生变化时,文件名也会变化,从而避免被浏览器缓存。

      对于vue-cli用户,可以在vue.config.js中配置 output.filename 和 output.chunkFilename。

      1. 在vue路由的meta信息中添加 noCache: true,然后在全局路由守卫(beforeEach)中判断,如果当前路由设置了noCache,则在请求头中设置禁用缓存相关的字段,如Cache-ControlPragmaExpires等。

      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&timestamp=123456789

      以上方法并不能完全保证所有情况下都能避免微信浏览器缓存,因为微信浏览器自身的缓存策略可能会有所不同,但大多数情况下可以有效解决问题。

    • 小沙橘 普通会员 2楼
      { "error": "Failed to generate content." }
    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部