Question

我已将我的应用程序配置为在注册后向用户发送确认电子邮件。注册完成后，用户将看到一个页面，提示您需要确认您的电子邮件：

<div *ngIf="!emailConfirmed">
  <p> Please activate your account by clicking the relevant link in your Email </p>
</div>

<div *ngIf="emailConfirmed">
  <p>
   Your Email is now confirmed, please click the below button to Log-In.
  </p>
  <a class="btn btn-md btn-success btn-color" [routerLink]="['/login']">
    Sign In
  </a>
</div>

emailConfirmed只是我在emailConfirmed的打字稿相关文件中定义的一个简单变量：

export class EmailConfirmed {
  public emailConfirmed: boolean;
}

用户单击其电子邮件中的链接后，将验证其帐户，然后使用以下代码将应用程序再次重定向到ConfirmEmail页：

[HttpGet]
[Route("ConfirmEmail", Name = "ConfirmEmailRoute")]
public async Task<IActionResult> ConfirmEmail(string userId = "", string code = "")
{
    //....
    IdentityResult result = await UserManager.ConfirmEmailAsync(userId, code);
    if (result.Succeeded)
    {
        return Redirect("http://localhost:5000/emailconfirmed");
    }
}

现在的问题是：我不知道如何从WEB API和emailConfirmed行中将EmailConfirmed组件的return Redirect变量设置为true，以便用户这次看到第二条消息了吗？我也怀疑我是否选择了使用return Redirect("http://localhost:5000/emailconfirmed");行将应用程序重定向到Angular路由的最佳方法。

Answer 1

@ManojChoudhari是正确的。你不能这样走！

首先，它应该是“ HttpPost”。返回响应，然后使用路由器在客户端重定向。这是一个小例子。这没有考虑到关注点分离！

服务器端

模型

public class UserRequest {
    public string UserId { get; set; }
    public string Code { get; set; }
}

public class EMailConfirmationResponse {
    public boolean EmailConfirmed { get; set; }
}

控制器

...
[HttpPost]
[Route("ConfirmEmail", Name = "ConfirmEmailRoute")]
public async Task<IHttpActionResult> ConfirmEmail(UserRequest user)
{
    var result = await UserManager.ConfirmEmailAsync(user.UserId, user.Code)
    if (result.Succeeded)
    {
        return Ok(new EMailConfirmationResponse { EmailConfirmed = true });
    }
    else
    {
        return BadRequest("An error occurred confirming the given email-address.");
    }
}
...

客户端

import { Component } from "@angular/core";
import { Router } from "@angular/router";
import { HttpClient } from "@angular/common/http";
@Component({
    selector: "your",
    templateUrl: "./your.component.html"
})
export class YourAngularComponent {
    constructor(
        private _router: Router,
        private _http: Http
    ) {

... 
    // put this into your method
    const httpOptions = { headers: new HttpHeaders({'Content-Type':  'application/json', 'Authorization': 'my-auth-token'}) };
    this.http
        .post("webapiurl", { userId: "TheUserId", code: "TheUserCode" }, httpOptions)
        .subscribe((response) => {
            const emailConfirmationResponse = response.json();
            if(emailConfirmationResponse.emailConfirmed) {
                this._router.navigate(["emailconfirmed"]);
            }
        }, (err: HttpErrorResponse) => {
            // do some error handling here:
            console.log(err.error);
            console.log(err.name);
            console.log(err.message);
            console.log(err.status);
        }
    );
...

Answer 2

您需要了解的一件事-Angular路由仅在客户端可用。您将无法从服务器端将用户重定向到角度模板。

您可能拥有的选项是从Web API返回一些标志。此标志应该是唯一的，然后角度应将用户重定向到其他页面。

您的API代码应为：

[HttpGet]
[Route("ConfirmEmail", Name = "ConfirmEmailRoute")]
public async Task<IActionResult> ConfirmEmail(string userId = "", string code = "")
{
    //....
    IdentityResult result = await UserManager.ConfirmEmailAsync(userId, code);
    if (result.Succeeded)
    {
        return Ok();
    }
    else
    {
        return BadRequest("An error occurred confirming the given email-address.");
    }
}

在您的客户端打字稿中，您可以添加以下代码：

//// result = call web api and take result
//// if result is 200 OK then
this.router.navigate(['/your-path'])

希望这会有所帮助。

Answer 3

我想直接从webapi不能重定向。使用Api响应，然后按角度重定向到另一个页面或域。

从ASP.NET WEB API调用角路由

3 个答案:

服务器端

模型

控制器

客户端