Vue进阶(六十七)页面刷新路由传参丢失问题分析及解决

一、前言

问题描述:Vue项目上线后,在IE浏览器上,从A页面跳转至B页面,B页面通过data中接收来自A页面的参数信息,并在created页面生命周期调用服务接口serviceB.1,返回数据后进行B页面数据渲染展示。B页面刷新后,serviceB.1接口入参丢失且未做入参非空校验,导致serviceB.1全表查询,导致内存溢出。

二、问题排查

通过查看Apache应用服务器access_log日志,发现用户在当前页面做了刷新操作。

通过查看代码得知路由传参获取在data中通过this.$route.query.param方式实现。在mounted钩子函数中进行方法调用。

初步怀疑data中获取的参数在页面刷新时由于异步获取导致,在mouted钩子函数执行时还未获取到路由传参。

解决方法是通过设置延时解决,但是延时大小取值不好精准衡量。可在钩子函数方法执行前获取路由传参。

三、延伸阅读

3.1 Apache服务器access_log日志

在这里插入图片描述

Apache的access.log文件在每次有用户访问时都会被记录。这可以是用户浏览网站、下载文件、提交表单或进行其他类型的请求。每条记录都会包含该请求的详细信息,包括:

  • IP地址:请求的客户端IP地址。
  • 时间戳:请求发生的时间。
  • 请求方法:请求使用的HTTP方法(例如GET或POST)。
  • 请求的资源:客户端请求的URL。
  • 状态码:服务器响应的HTTP状态码(例如200或404)。
  • 数据量:服务器响应的数据量。
  • 引用页面:如果存在,该请求的来源页面。
  • User-Agent:客户端使用的浏览器的信息。

可以通过以下步骤来调整Apache的配置,来决定记录的信息种类和细节。

  1. 打开Apache的配置文件:可以使用文本编辑器打开Apache的配置文件,通常位于/etc/httpd/conf/httpd.conf

  2. 查找LogFormat指令:该指令定义了您希望在access.log中记录的信息。

  3. 调整格式字符串:在LogFormat指令中,可以调整格式字符串以指定希望记录的信息。可以参考Apache文档,了解可用的格式字符串字符。

  4. 保存更改:保存更改并退出文本编辑器。

  5. 重新启动Apache:使用以下命令重新启动Apache以使更改生效:

    shell sudo service httpd restart

3.2 浏览器的常见User Agent 各字段的解释

User Agent是指浏览器在向服务器发送请求时,会在请求头中添加的一段字符串,用于标识浏览器的类型、版本、操作系统等信息。常见的User Agent包括以下字段:

  1. Mozilla/5.0:表示浏览器使用的是Mozilla浏览器引擎,版本号为5.0。

  2. (Windows NT 10.0; Win64; x64):表示操作系统为Windows 10,使用的是64位架构。

  3. AppleWebKit/537.36:表示浏览器使用的是Webkit引擎,版本号为537.36。

  4. (KHTML, like Gecko):表示浏览器使用的是KHTML渲染引擎,类似于Gecko。

  5. Chrome/91.0.4472.124:表示浏览器为Chrome,版本号为91.0.4472.124。

  6. Safari/537.36:表示浏览器为Safari,版本号为537.36。

  7. Edge/91.0.864.59:表示浏览器为Edge,版本号为91.0.864.59。

  8. Mozilla/4.0:表示浏览器使用的是Mozilla浏览器引擎,版本号为4.0。

  9. (compatible; MSIE 7.0; Windows NT 6.0):表示浏览器为IE7,操作系统为Windows Vista。

  10. (Windows NT 6.1; WOW64; Trident/7.0; AS; rv:11.0) like Gecko:表示浏览器为IE11,操作系统为Windows 7,使用的是Trident引擎。

  • Mozilla/5.0: 网景公司浏览器的标识,由于互联网初期浏览器市场主要被网景公司占领,很多服务器被设置成仅响应含有标志为Mozilla的浏览器的请求,因此,新款的浏览器为了打入市场,不得不加上这个字段。

  • Windows NT 6.3 : Windows 8.1的标识符;

  • WOW64: 32位的Windows系统运行在64位的处理器上;

  • AppleWebKit/537.36:苹果公司开发的呈现引擎;

  • KHTML:是Linux平台中Konqueror浏览器的呈现引擎KHTML;

  • Geckeo:呈现引擎;

  • like Gecko:表示其行为与Gecko浏览器引擎类似;

例如User-Agent 信息如下:

User-Agent: Mozilla/5.0(Windows NT10.0; WOW64; Trident/7.0; rv:11.0) like Gecko

上述代理信息可以解析为:应用系统运行在Win10, IE11浏览器上,使用的Trident引擎。

猜你喜欢

转载自blog.csdn.net/sunhuaqiang1/article/details/132626135