web-dev-qa-db-ja.com

Angular get（およびその他）リクエストでトークンを送信

何らかの理由で、インターネットにはAngular 4（TypeScriptを使用します。TypeScriptを使用します。このスクリプトでは、JavaScriptのようなオプションプロパティを含めずにスキップできません） 。

私のチームのRESTful APIをヒットしようとしています。これには、たとえば次のようなGETリクエストで認証トークンが必要です。

return this.http.get(this.BASE_URL + '/api/posts/unseen/all', {
            headers : {
                "Authorization": 'Token token="' + TokenService.getToken() + '"'
            }   
        })

TokenServiceは、アプリで使用するトークンを返すために作成したビジネスサービスクラスです。入力すると、代わりにこのエラーが表示されます。

enter image description here

これが表示されるサービスファイルの依存関係は次のとおりです。

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions, Response } from '@angular/http';

import { Post } from '../models/post'; // business class 
import 'rxjs/';
import { User } from '../models/user'; // business class
import { HttpService } from './http.service'; // service for connecting us to the base location of the endpoints. provides BASE_URL to any service that extends it
import { TokenService } from './token.service'; // token provider

注：私はを試してみましたそのエラーをコピーして貼り付けましたが、Visual Studio Codeは私と協力しません。

angularangular-http
8
Mike Warren

新しいhttpClientを使用すると、トークンの送信が簡単になります。まず、インターセプターを定義する必要があります

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import { AuthService } from './auth/auth.service';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class TokenInterceptor implements HttpInterceptor {

  constructor(public auth: AuthService) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    request = request.clone({
      setHeaders: {
        Authorization: `Bearer ${this.auth.getToken()}`
      }
    });

    return next.handle(request);
  }
}

インターセプターをプロバイダーに追加する必要があります。

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { TokenInterceptor } from 'token.interceptor';

@NgModule({
  bootstrap: [AppComponent],
  imports: [...],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: TokenInterceptor,
      multi: true
    }
  ]
})
export class AppModule {}

これで、リクエストを行うと、トークンがヘッダーに自動的に表示されます。

import { HttpClient } from '@angular/common/http';
// ...
export class AppComponent {

  constructor(public http: HttpClient) {}

  public connectServer() {
    this.http.get('url')
      .subscribe(
        data => console.log(data),
        err => console.log(err)
      );
  }

}

インターセプターでは、サービスを使用してトークンが有効かどうかを確認します。独自のauthenticationServiceを定義できるため、必須ではありません。ただし、使用できるものは次のとおりです。

import { Injectable } from '@angular/core';
import decode from 'jwt-decode';

@Injectable()
export class AuthService {

  public getToken(): string {
    return localStorage.getItem('token');
  }

  public isAuthenticated(): boolean {
    // get the token
    const token = this.getToken();
    // return a boolean indicating whether or not the token is expired
    return tokenNotExpired(token);
  }

}
8
edkeveked