Question

我有一个休息电话，并在服务中创建了标题。我现在面临的问题是，在60分钟后，我的令牌过期了，我必须在代码中手动更改令牌。

我正在尝试设计一个文本框，用户只需在其中输入新鲜的令牌，然后单击按钮，就会调用令牌分配的变量并显示来自我的API的数据。

我已经创建了一个文本框和按钮，但是不确定如何将我的将变量分配给身份验证令牌的逻辑。并将它们分配给我的按钮。

我在互联网周围寻找资源。但是它们有点复杂。我对此并不陌生，并期待一个简单的解决方案。谢谢。

这是我到目前为止尝试过的。

Authenticate.html

<p>Please enter a valid token</p>
<input  #tokens
  (keyup.enter)="addtoken(tokens.value)"
       (blur)="addtoken(tokens.value); tokens.value = ''">

<button (click)="addtoken(tokens.value)">Send Request</button>

<ul><li *ngFor="let token of tokens">{{token}}</li> </ul>

这是我的服务。

import { Injectable } from '@angular/core';
import {HttpClient, HttpHeaders} from "@angular/common/http";



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

@Injectable({
  providedIn: 'root'
})


export class DataService {

  constructor(private http: HttpClient) { }

  getlocations() {
    return this.http.get(
      'url' , httpOptions)
  }

}

Answer 1

只需在您的服务中创建一个方法（updateHeader(updatedHeader)即可更新标头并从您的组件中调用它：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from "@angular/common/http";

@Injectable({
  providedIn: 'root'
})
export class DataService {

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

  constructor(private http: HttpClient) { }

  updateHeader(updatedHeader) {
    this.httpOptions.headers = this.httpOptions.headers.set('Authorization', `Bearer ${updatedHeader}`);
    console.log(this.httpOptions.headers.get('Authorization'));
  }

  getlocations() {
    console.log(this.httpOptions.headers.get('Authorization'));
    return this.http.get('url' , this.httpOptions);
  }

}

然后您可以在组件内部调用此方法：

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  tokens = [];

  constructor(private dataService: DataService) {}

  addtoken(value) {
    if (value) {
      this.tokens.push(value);
      this.dataService.updateHeader(value);
    }
  }
}

这是您推荐的Working Sample StackBlitz。

如何在http标头中为令牌设置变量

1 个答案: