如何在自定义重置密码页判断Firebase重置密码链接是否已使用/过期？

要在进入自定义重置密码页面时就判断链接是否已使用或过期，你可以使用Firebase Auth提供的verifyPasswordResetCode方法，在页面初始化阶段验证链接中的oobCode有效性，无需等到提交新密码后才检测。

具体实现步骤： #

• 提取URL中的oobCode：重置密码链接会携带oobCode参数，通过路由或URL解析即可获取该值。
• 初始化时验证代码有效性：在组件的初始化钩子（比如Angular的ngOnInit）中调用verifyPasswordResetCode方法，传入提取到的oobCode。
• 根据结果处理页面逻辑：
  • 验证成功：正常展示重置密码表单，允许用户输入新密码。
  • 验证失败（链接过期/已使用/无效）：直接跳转到错误页面，提示用户重新发起密码重置流程。

代码示例： #

import { Component, OnInit } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-reset-password',
  templateUrl: './reset-password.component.html',
  styleUrls: ['./reset-password.component.css']
})
export class ResetPasswordComponent implements OnInit {
  oobCode: string | null = null;
  isLinkValid: boolean = false;

  constructor(
    private afAuth: AngularFireAuth,
    private route: ActivatedRoute,
    private router: Router
  ) {}

  ngOnInit(): void {
    // 从URL参数中获取oobCode
    this.oobCode = this.route.snapshot.queryParamMap.get('oobCode');
    
    if (!this.oobCode) {
      // 无有效oobCode直接跳转错误页
      this.router.navigate(['error']);
      return;
    }

    // 提前验证重置链接有效性
    this.afAuth.verifyPasswordResetCode(this.oobCode)
      .then(() => {
        // 验证通过，标记链接有效
        this.isLinkValid = true;
      })
      .catch(() => {
        // 验证失败，跳转错误页
        this.router.navigate(['error']);
      });
  }

  // 保留原有提交新密码逻辑
  resetPassword(new_password: string): void {
    if (!this.oobCode || !this.isLinkValid) return;
    
    this.afAuth
      .confirmPasswordReset(this.oobCode, new_password)
      .then(() => this.router.navigate(['reset-success']))
      .catch(() => {
        this.router.navigate(['error']);
      });
  }
}

关键说明： #

verifyPasswordResetCode是Firebase Auth专门用于验证重置密码链接有效性的API，无需用户输入新密码就能提前检测链接状态，完美解决你希望进入页面就知晓链接是否可用的需求。

内容的提问来源于stack exchange，提问作者Sachitha Ilayperuma