时间戳

首页 > 解决方案 > 使用 Angular 中的标头重定向到外部 url

javascript - 使用 Angular 中的标头重定向到外部 url

问题描述

我有一个 Angular（版本 8）应用程序，它将使用 HEADERS 重定向/调用外部 url（不是 API）。

我可以调用/重定向外部 url，但无法发送任何 HEADERS。

问题是一旦我能够成功登录，我必须在重定向时将标头中的身份验证令牌发送到外部 url。

请让我知道如何在重定向到外部 url 时发送身份验证令牌。

我已经浏览了下面的 url，它可以帮助我重定向到外部 url，但没有发送标题。

Angular 6使用POST重定向到外部网址

标签： javascriptangular

解决方案

  1. 您创建headers.

例如：JSW，如果您在 localStorage 中有您的令牌，则为“current_user”令牌：

import { HttpHeaders } from '@angular/common/http';
....
const headers = new HttpHeaders()
  .append("Authorization", "Bearer " + localStorage.getItem("current_user")["token"])
  .append("Content-type", "application/json");

  1. 你定义你的httpOptions.

    const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json', Authorization: 'your-auth-token' }) };

headers或更整洁（如果您之前已经声明过 const

const httpOptions = {
  headers
};
  1. 您对外部 url 进行重定向/调用。
    const externalUrl = 'http://....';
    const dataToPut = 'Usually, it will be an object, not a string';
    
    this.http.post<Hero>(this.externalUrl, dataToPut , httpOptions)
        .pipe(
          catchError(this.handleError('post error: ', dataToPut ))
        );

无论如何，一旦你知道如何去做，在标头中发送身份验证令牌的最佳方法是通过一个INTERCEPTOR，这将拦截你所有的 http 调用并在标头中插入身份验证参数： https ://angular.io/指南/http#intercepting-requests-and-responses

PS：我强烈建议您阅读这2个官方文档页面以进行进一步检查...都在那里，更详细的信息

https://angular.io/guide/http

https://angular.io/guide/http#adding-headers

[Angular] [http] [headers] [interceptor]

推荐阅读