从ASP.NET Web API调用角度路由 [英] Call an Angular Route from ASP.NET WEB API

问题描述

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

<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的TypeScript相关文件中定义的一个简单变量：

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和return Redirect行将emailConfirmed组件的emailConfirmed变量设置为true，以便用户这次看到第二条消息？此外，我怀疑我是否选择了使用return Redirect("http://localhost:5000/emailconfirmed");行将应用程序重定向到角度路由的最佳方式。

推荐答案

@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);
        }
    );
...

这篇关于从ASP.NET Web API调用角度路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！