当用户单击电子邮件中的帐户激活时如何重定向到 angular 6 页面 [英] How to redirect to angular 6 page when user click on account activation in email

问题描述

当用户点击电子邮件中的帐户激活时如何重定向到 angular 6 页面.

How to redirect to angular 6 page when the user clicks on account activation in the email.

我的流程:
1.用户注册账号.
2. 用户从邮件中获取激活账户链接.链接示例:http://localhost/editProfile/{userId}/token/{token}.这应该是我的 API，它从后端获取 JWT 令牌.
3. 用户点击链接，用户将重定向到编辑个人资料页面.

My process flow:
1. User register account.
2. The user gets activation account link from the email. Link example: http://localhost/editProfile/{userId} /token/{token}. This should be my API which gets JWT token from backend.
3. User click on the link and user will redirect to edit profile page.

我的问题是我不明白当用户重定向到编辑个人资料页面时使用 angular 6 如何在用户单击 URL 时从 URL 获取令牌和 ID.

My problem is I do not understand by using angular 6 when user redirects to edit profile page how I can get the token and id from the URL when the user clicks the URL.

推荐答案

你可以用下面的方法实现它(那些没有经过测试，抱歉，如果我犯了任何错别字/错误，请告诉我.).简单的路由参数处理.

You can achieve it with something like below (Those are not being tested, sorry if i have made any typos / mistakes, let me know.). Simple route parameters handling.

在您的路线定义中:

export const routes: Routes = [
  { path: '/editProfile/:userId/token/:token', component: MyComponent }
]

在你的路由组件中:

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

export class EditProfileComponent implements OnInit, OnDestroy {
  userId: string;
  token: string;

  private subscription: Subscription ;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.subscription = this.route.params.subscribe(params => {
      this.userId = params['userId'];
      this.token = params['token'];
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

参见 https://angular-2-training-book.rangle.io/v/v2.3/handout/routing/routeparams.html 了解更多关于路由参数的信息.

See https://angular-2-training-book.rangle.io/v/v2.3/handout/routing/routeparams.html for more about route parameters.

这篇关于当用户单击电子邮件中的帐户激活时如何重定向到 angular 6 页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！