get（および他の）リクエストを使った角度送信トークン

Question

何らかの理由で、インターネットにAngular 4でこれを行う方法の例がありません（これはTypeScriptを使用しています。そうに移行する）。

私は例えば、のような、GETリクエストで、認証トークンを必要と私のチームのRESTfulなAPIを、ヒットしようとしている：

TokenServiceは、私が使用するためのトークンを返すために書いたビジネス・サービスのクラスである

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

アプリでそれを入力する時には、私が代わりにこのエラーを迎えます：サービス・ファイル内の

は私の依存関係、これがあるに表示されます。

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はこれを行うことに協力しません。

Answer 1

新しい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); 
    } 

}