由nginx自动补‘/’造成的“灵异事件”反思

2019-04-23  本文已影响0人  470d98b91bd3

项目上uat测试后,出现了一个“灵异事件”,且听我娓娓道来

测试的同事突然给我提了一个bug,说我页面在切换页数的时候,会把部分已经填写了但没保存的数据清空。我让测试的小伙伴重现了几次,我发现正常情况下是不会出问题的,但是他只要从另一个页面一进入该页面就立即F5刷新,再输入一些表单信息时,切换页数,表单信息就会自动重置。

该死的是,我竟没办法在我本地上去重现这个问题!

于是我绞尽脑汁在uat环境上看,却惊奇的发现,在我切换页数“灵异事件”发生的时候,会去请求一个接口,而这个接口只会在保存的时候跟页面初始化的时候调用到

于是我试探得改了一下代码,发现切换页面时竟然整个页面重新实例化了一次。我一想这不正常,于是刷新的时候看到了我从A页面进入的时候,url上是/puzzle/work?page=1,而在我刷新后url变成了puzzle/work/?page=1,在我切换到第二页的时候,url会被强制变回/puzzle/work?page=2

知道真相的我气得直跺脚,千算万算没算到问题竟然出现在这个斜杠上。准确来说不能把锅算在nginx头上

image.png

原因是nginx 这个配置,不过这个是单页应用比较常见的作法了, /puzzle/work 这个文件本来是没有的,所以就会尝试这个/puzzle/work/ ,访问这个目录的时候,就会访问到 /puzzle/work/index.html

所以我只能在前端代码中去兼容这个做法。做法很简单,就是修改切换页码的逻辑

      // 原来的代码
      const query = Object.assign({}, this.$route.query)
      query.page = this.currentPage
      const route = Object.assign({}, this.$route, {
        query
      })
      this.$router.replace(route)

正确的代码:

      // 正确的代码
      const query = Object.assign({}, this.$route.query)
      query.page = this.currentPage
      this.$router.replace({
        path: this.$route.path,
        query
      })

另外,如果用if语句或者做其他判断的时候需要对url上的参数做校验,建议大家使用$router.name 而不是$router.path,否则“灵异事件”会找上你!

上一篇下一篇

猜你喜欢

热点阅读