Vue.js结合Firebase拆分OTP认证页面后验证码校验失败问题求助

核心根因定位 #

• 最直接的拦截原因：*Verify.vue的verifyCode方法入口设置了手机号长度校验，但拆分页面后，用户在Login页输入的手机号完全没有传递到Verify组件中。Verify初始化时phone字段为默认空字符串，长度为0，不满足“长度等于10”的校验要求，直接弹出格式错误提示，根本不会执行到调用验证码确认的逻辑，也就是感知到的“页面无法识别用户输入的验证码”。
• 组件状态断层：单页面实现时，手机号、OTP输入、Firebase返回的confirmationResult都在同一个组件作用域内，数据可直接互通；拆分为两个独立路由页面后，没有设计跨页面的状态传递机制，Verify组件无法获取Login页采集的用户手机号。
• 全局状态覆盖：Verify.vue的created钩子会重新执行initReCaptcha，新建reCAPTCHA实例覆盖window上原本由Login页创建的验证实例，可能导致已完成的人机校验凭证失效。
• 冗余逻辑干扰：Verify页保留了和Login页重复的sendCode、initReCaptcha方法，且隐藏的手机号表单因为绑定了hidden属性，用户完全无法交互填充，进一步放大了空值校验的问题。

可落地的修复步骤 #

1. 补充跨页面参数传递
   在Login页发送验证码成功、跳转路由时，把用户输入的手机号通过路由query参数携带过去，修改原来的跳转逻辑：

   // 原跳转代码
   // nextpage.$router.push({path:'/Verify'})
   // 修改为带参数传递
   nextpage.$router.push({
     path: '/Verify',
     query: { phone: this.phone }
   })
   

2. 在Verify页读取路由传递的手机号
   调整Verify页的created生命周期逻辑，从路由参数中读取手机号赋值给本地响应式数据，保证校验逻辑能拿到合法值：

   created(){
     // 优先读取路由传递的手机号
     if(this.$route.query.phone) {
       this.phone = this.$route.query.phone
     }
   }
   

3. 避免全局状态被覆盖
   把reCAPTCHA初始化逻辑从Verify页删除——发送验证码的流程已经在Login页完成，Verify页只需要执行验证码确认操作，不需要重新创建reCAPTCHA实例，避免覆盖window上存储的有效验证状态。如果需要在Verify页支持“重新发送验证码”功能，再单独绑定对应的按钮触发初始化逻辑。
4. 调整校验逻辑避免误拦截
   修改verifyCode方法的校验规则，去掉不必要的手机号重复校验，增加异常兜底判断：

   verifyCode(){
     // 仅校验OTP格式，不再重复校验手机号合法性（手机号已在Login页完成校验）
     if(!this.otpCode || this.otpCode.trim().length !== 6){
       alert('请输入6位数字验证码');
       return
     }
     // 增加confirmationResult存在性判断，避免未获取验证码时点按钮报错
     if(!window.confirmationResult) {
       alert('请先获取短信验证码');
       return
     }
     const code = this.otpCode.trim()
     window.confirmationResult.confirm(code)
       .then(result => {
         // 认证成功后跳转目标页面
         this.$router.push('/LoginCompte')
       })
       .catch(error => {
         alert('验证码错误或已过期，请核对后重试')
       })
   }
   

5. 清理冗余代码
   删除Verify页中用不到的隐藏手机号表单、重复的sendCode方法，减少不必要的逻辑执行，避免页面加载时生成冲突的全局变量。

内容的提问来源于stack exchange，提问作者Diarra Kalifala