获取从asp.net web api 2传递的角度标题值答案

【问题标题】：Get header value in angular passed from asp.net web api 2获取从asp.net web api 2传递的角度标题值
【发布时间】：2019-06-01 19:45:17
【问题描述】：

我正在使用 Angular 7 来制作简单的身份验证应用程序。我已经通过 asp.net wep api 2 在标头中设置了令牌。这是这个的代码

 [Route("api/AuthEmployees")]
    [AcceptVerbs("POST")]
    public IHttpActionResult Login(string userName, string password)
    {
        try
        {
            Employee employee = Saloon.Employees.FirstOrDefault(x => x.UserName.Equals(userName) && x.Password.Equals(password));
            if (employee != null && !(bool) employee.isAuthenticated)
            {

                employee.isAuthenticated = true;
                employee.authenticationkey = Guid.NewGuid().ToString().Replace("-", "");
                HttpContext.Current.Response.Headers.Add("X-Token", employee.authenticationkey);
                Saloon.SaveChanges();
                employee.Password = "";
                return Json(employee.authenticationkey);
            }
            else if(employee != null && (bool) employee.isAuthenticated)
            {
                employee.authenticationkey = RefreshToken(employee.authenticationkey);
                HttpContext.Current.Response.Headers.Add("X-Token", employee.authenticationkey);

                return Json(employee.authenticationkey);
            }
            else
            {
                return InternalServerError();
            }
        }
        catch (Exception)
        {
            throw;
        }
    }

在我的 Angular 应用程序中，我尝试使用“Response”类来获取标头值，但它每次都返回 null。这是用于身份验证的服务类

 public authEmployee(userName:string,password:string) :Observable<any>
  {
    console.log('Auth employee service called');

    return this.http.post<any>(this.API_ADDRESS + '/api/AuthEmployees',
     {httpOptions:this.httpOptions} ,
      {
        params:
        {
          username: userName, password: password
        }
      }
    );
  }

httpOptions 在哪里

httpOptions ={ headers: new HttpHeaders({ 'Content-Type': 'application/json'})};

这是我的组件。

   getAuth():void
   {
      this.authService.authEmployee(this.username,this.password).subscribe(
        (x:Response) =>
        {

         console.log('Success Called')

         console.log(x.headers.get('X-Token')) //Always returns null

         this.callRedirect();
        },

       (error)=>
       {
         console.log('Error Called')
         console.log(error)
        this.callRedirect();
       },

       () => {

       });
    }

我也尝试在我的 httpOptions 中使用观察：“响应”，但它也不起作用。请帮我解决这个问题。谢谢

【问题讨论】：

标签： angular

【解决方案1】：

HttpContext.Current.Response.Headers.Add("X-Token", employee.authenticationkey);

您将 X-Token 放在服务器上并在前端获取 Token。

 x.headers.get('Token')

但应该是一样的:)

【讨论】：

我也这样做了，但没有奏效。让我更新一下。

【解决方案2】：

由于你是使用ASP.NET进行后端开发，所以你应该直接在Angular客户端中设置Headers你想读的内容，这意味着你有将以下标题添加到您的 Response ：

Access-Control-Expose-Headers

它的值应该是你想在Angular客户端中读取的标题名称；

Response.Headers.Add("Access-Control-Expose-Headers", "X-Token");

现在，您可以在 Angular 客户端中访问它；

For More Information

【讨论】：