网易u盾回车登录导致页面刷新的问题分析

# 项目背景

这是一个vue脚手架生成的vue3 + ts的项目，文件都是tsx格式
项目依赖
vue cli 信息

# 问题描述

我们有一个登录页面，登录页面之前就有输入密码回车登录的功能，回车登录之后会接入网易的校验，防止用户恶意刷新等操作
后来新同事cv 了一份，差不多的代码，差不多的逻辑，然后在他的页面上回车登录就会触发页面刷新，并且带上一些莫名其妙的参数
示例

开始的地址：http://192.168.2.165:1027/h5/permissions/#/doubleAuthVerifyPhone
出现问题之后的地址：http://192.168.2.165:1027/h5/permissions/?NECaptchaValidate=#/doubleAuthVerifyPhone

1
2
3

# 问题影响

正常点击登录没问题
当用户回车登录的时候，因为这个bug，会重定向一次，导致用户需要操作两次，才能进入系统，用户体验很差

# 为啥a页面没有问题，复制过来之后的代码，回车登录就会触发这个问题？

当form 下面只有一个输入框的时候，按回车键会提交表单
规范说的 (opens new window)

# 问题分析

# 猜想1：

自己业务代码上有问题，然后看了下代码，并且和之前的代码做对比，发现不是这个问题

# 猜想2：

询问网易u盾技术，出现NECaptchaValidate这个参数是啥原因，经常沟通和排查，人家说不是他们那边的问题，还得到了一个网易u盾不为人知的配置

# disableValidateInput: 去掉验证码自己添加的 input 元素，默认是false

网易u盾技术让我加了这个之后还不行，就说不是他们的问题了，那这样的话，只能是浏览器默认事件的问题咯

# 猜想3：

触发了浏览器默认事件，因为使用了element form 组件，并且之前也在人家的api里面有提到说明，事实证明是这个问题，但是我还是想不通a页面为啥没有这个bug 😄😄😄

# element form 官方说明，事实证明也是因为这个问题导致的，O(∩_∩)O

# 解决方案

# 发现了一个好玩的网站，讲的东西挺不错的，喜欢的朋友可以看看

https://zh.javascript.info/

# 参考资料

浏览器默认事件 (opens new window)

上次更新: 2023/12/18, 15:00:26

← 微信扫码登录流程浏览器工作原理与实践→

网易u盾 回车登录导致页面刷新的问题分析

# 项目背景

# 问题描述

# 问题影响

# 为啥a页面没有问题，复制过来之后的代码，回车登录就会触发这个问题？

# 问题分析

# 猜想1：

# 猜想2：

# disableValidateInput: 去掉验证码自己添加的 input 元素，默认是false

# 猜想3：

# element form 官方说明，事实证明也是因为这个问题导致的，O(∩_∩)O

# 解决方案

# 发现了一个好玩的网站， 讲的东西挺不错的，喜欢的朋友可以看看

# 参考资料

网易u盾回车登录导致页面刷新的问题分析

# 发现了一个好玩的网站，讲的东西挺不错的，喜欢的朋友可以看看