Как настроить переменную для токена в заголовке http - PullRequest
Новая
       7

Как настроить переменную для токена в заголовке http

0 голосов
/ 11 января 2019

У меня есть звонок на отдых, и я создал заголовок в моем сервисе. Проблема, с которой я сейчас сталкиваюсь, заключается в том, что через 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)
  }

}

1 Ответ

0 голосов
/ 11 января 2019

Просто создайте метод (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);
    }
  }
}

Вот Рабочий образец StackBlitz для вашей ссылки.

...