Angular 6+Ngx-admin中如何获取重置密码URL的token参数

要从reset-password/:token的URL中提取token值，你需要用到Angular官方提供的ActivatedRoute服务——这是处理路由参数最可靠的方式，比手动解析router.url要高效且易维护。下面是具体实现步骤：

1. 导入ActivatedRoute #

在你的NgxResetPasswordComponent文件顶部，添加ActivatedRoute的导入：

import { ActivatedRoute } from '@angular/router';

2. 在构造函数中注入ActivatedRoute #

修改组件的构造函数，注入ActivatedRoute服务：

constructor(
  protected service: NbAuthService,
  @Inject(NB_AUTH_OPTIONS) protected config = {},
  protected router: Router,
  private route: ActivatedRoute // 新增这一行注入
) {
  // 原有初始化代码保持不变
}

3. 获取URL中的Token #

根据你的业务场景，有两种常用的获取方式：

方式一：快照获取（适合组件不会复用的场景） #

如果用户是从其他页面跳转到重置密码页，不会在同一个组件实例下切换不同的token，直接用快照获取即可：

constructor(
  // 注入的服务保持不变
) {
  this.redirectDelay = this.getConfigValue('forms.resetPassword.redirectDelay');
  this.showMessages = this.getConfigValue('forms.resetPassword.showMessages');
  this.provider = this.getConfigValue('forms.resetPassword.provider');

  // 提取token
  const resetToken = this.route.snapshot.params['token'];
  console.log('重置密码Token:', resetToken); // 会输出你要的dsadasdasfaf
}

方式二：订阅参数变化（适合组件可能复用的场景） #

如果你的组件可能在同一个实例下切换不同的token（比如用户在同一个页面内跳转不同的重置链接），建议订阅params Observable，确保参数变化时能实时更新：

import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

// 定义一个销毁信号，用于取消订阅避免内存泄漏
private destroy$ = new Subject<void>();
resetToken: string; // 存储token的组件变量

constructor(
  // 注入的服务保持不变
) {
  this.redirectDelay = this.getConfigValue('forms.resetPassword.redirectDelay');
  this.showMessages = this.getConfigValue('forms.resetPassword.showMessages');
  this.provider = this.getConfigValue('forms.resetPassword.provider');

  // 订阅路由参数变化
  this.route.params.pipe(takeUntil(this.destroy$)).subscribe(params => {
    this.resetToken = params['token'];
    console.log('重置密码Token:', this.resetToken);
  });
}

// 组件销毁时触发信号，取消所有订阅
ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

4. 在表单中传递Token给后端 #

把获取到的token和新密码一起传给后端服务，比如在表单提交方法中：

// 假设你的表单提交方法，接收新密码参数
onSubmit(newPassword: string) {
  // 调用auth服务的重置密码接口，传入token和新密码
  this.service.resetPassword(this.provider, {
    token: this.resetToken,
    password: newPassword
  }).subscribe(
    () => {
      // 重置成功后的逻辑，比如跳转登录页
      this.router.navigate(['/auth/login']);
    },
    (error) => {
      // 处理错误逻辑，比如显示错误提示
      console.error('重置密码失败:', error);
    }
  );
}

为什么不推荐用router.url？ #

手动解析router.url需要截取字符串，不仅麻烦，而且如果后续路由结构发生变化（比如修改路由路径），你还要同步修改截取逻辑；而ActivatedRoute是Angular官方为路由参数设计的解决方案，能自动匹配路由中定义的:token参数，稳定性和可维护性更高。

内容的提问来源于stack exchange，提问作者Umair Malik