各ヘッダーにjson Webトークンを追加するにはどうすればよいですか？

Question

私は認証にJSON Webトークンを使用しようとしており、ヘッダーにJSON Webトークンを添付して要求に送信する方法を見つけようとしています。

私はhttps://github.com/auth0/angular2-jwtを使用しようとしていましたが、Angularで動作させることができず、あきらめて、すべての要求にJWTを送信する方法と、ヘッダー（好ましくはヘッダー） 。それは私がそれがそうであると思ったよりちょっとだけより難しかった。

は、ここに私のログイン

submitLogin(username, password){ 
     console.log(username); 
     console.log(password); 
     let body = {username, password}; 
     this._loginService.authenticate(body).subscribe(
      response => { 
       console.log(response); 
       localStorage.setItem('jwt', response); 
       this.router.navigate(['UserList']); 
      } 
     ); 

    } 

をし、私のlogin.service

authenticate(form_body){ 
     return this.http.post('/login', JSON.stringify(form_body), {headers: headers}) 
       .map((response => response.json())); 
    } 

私はこれらが本当に必要とされていません知っているが、多分それは助けたいです！このトークンが作成されて保存されると、2つのことを行い、ヘッダーで送信し、これに入れた有効期限を抽出したいと思います。

のNode.jsのログインコードの一部

var jwt = require('jsonwebtoken'); 
function createToken(user) { 
    return jwt.sign(user, "SUPER-SECRET", { expiresIn: 60*5 }); 
} 

は今、私はこのサービスに戻っノードに角度サービスを経由して、それを渡すようにしようとしています。

getUsers(jwt){ 
     headers.append('Authorization', jwt); 
     return this.http.get('/api/users/', {headers: headers}) 
      .map((response => response.json().data)); 
    } 

JWTは、コンポーネントをサービスに渡すローカルストレージのWebトークンです。

どこでもエラーは発生しませんが、ノードサーバーに到達したときにヘッダーで受信することはありません。

'content-type': 'application/json', 
accept: '*/*', 
referer: 'http://localhost:3000/', 
'accept-encoding': 'gzip, deflate, sdch', 
'accept-language': 'en-US,en;q=0.8', 
cookie: 'connect.sid=s%3Alh2I8i7DIugrasdfatcPEEybzK8ZJla92IUvt.aTUQ9U17MBLLfZlEET9E1gXySRQYvjOE157DZuAC15I', 
'if-none-match': 'W/"38b-jS9aafagadfasdhnN17vamSnTYDT6TvQ"' } 

Answer 1

カスタムHTTPクラスを作成し、requestメソッドをオーバーライドして、すべてのhttp要求でトークンを追加します。

http.service.ts

import {Injectable} from '@angular/core'; 
import {Http, XHRBackend, RequestOptions, Request, RequestOptionsArgs, Response, Headers} from '@angular/http'; 
import {Observable} from 'rxjs/Observable'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/catch'; 

@Injectable() 
export class HttpService extends Http { 

    constructor (backend: XHRBackend, options: RequestOptions) { 
    let token = localStorage.getItem('auth_token'); // your custom token getter function here 
    options.headers.set('Authorization', `Bearer ${token}`); 
    super(backend, options); 
    } 

    request(url: string|Request, options?: RequestOptionsArgs): Observable<Response> { 
    let token = localStorage.getItem('auth_token'); 
    if (typeof url === 'string') { // meaning we have to add the token to the options, not in url 
     if (!options) { 
     // let's make option object 
     options = {headers: new Headers()}; 
     } 
     options.headers.set('Authorization', `Bearer ${token}`); 
    } else { 
    // we have to add the token to the url object 
     url.headers.set('Authorization', `Bearer ${token}`); 
    } 
    return super.request(url, options).catch(this.catchAuthError(this)); 
    } 

    private catchAuthError (self: HttpService) { 
    // we have to pass HttpService's own instance here as `self` 
    return (res: Response) => { 
     console.log(res); 
     if (res.status === 401 || res.status === 403) { 
     // if not authenticated 
     console.log(res); 
     } 
     return Observable.throw(res); 
    }; 
    } 
} 

は今、私たちは、カスタムHTTPクラスにXHRBackendを提供するために、私たちのメインモジュールを設定する必要があります。あなたのメインモジュールの宣言では、プロバイダの配列に次の行を追加します。

app.module.tsその後

import { HttpModule, RequestOptions, XHRBackend } from '@angular/http'; 
import { HttpService } from './services/http.service'; 
... 
@NgModule({ 
    imports: [..], 
    providers: [ 
    { 
     provide: HttpService, 
     useFactory: (backend: XHRBackend, options: RequestOptions) => { 
     return new HttpService(backend, options); 
     }, 
     deps: [XHRBackend, RequestOptions] 
    } 
    ], 
    bootstrap: [ AppComponent ] 
}) 

を、あなたは今、あなたのサービスでカスタムHTTPプロバイダを使用することができます。たとえば、次のように

user.service.ts

import { Injectable }  from '@angular/core'; 
import {HttpService} from './http.service'; 

@Injectable() 
class UserService { 
    constructor (private http: HttpService) {} 

    // token will added automatically to get request header 
    getUser (id: number) { 
    return this.http.get(`/users/${id}`).map((res) => { 
     return res.json(); 
    }); 
    } 
} 

Source

Answer 2

私は、各要求に対して透過的にヘッダーを設定するいくつかのオプションを参照してください：デフォルトのHTTPの1の代わりに使用するのHttpClientサービスを実装

• 。
• はRequestOptionsクラス
• オーバーライドHTTPクラス、それを自己

あなたが一つの場所にあなたのヘッダーを設定することができ、これはあなたのHTTP呼び出しをAOK影響を与えるでしょう。この方法の独自の実装を提供します。

次の質問を参照してください：ここで

• How to set default HTTP header in Angular2?
• Angular2 - set headers for every request
• How do you set global custom headers in Angular2?

Answer 3

は、インスタンスのための計画を取得するための角度のコードの例ですが、あなたはちょうどこのようにそれを書き、

$scope.getPlans = function(){ 
    $http({ 
     url: '/api/plans', 
     method: 'get', 
     headers:{ 
     'x-access-token': $rootScope.token 
     } 
    }).then(function(response){ 
     $scope.plans = response.data; 
    }); 
    } 

あなたはまだ明らかでない場合

し、サーバー上で、あなたがこれを行うことができ、

var jwt = require('jsonwebtoken'); // used to create, sign, and verify tokens 
var config = require('./config'); // get our config file 

var secret = {superSecret: config.secret}; // secret variable 

// route middleware to verify a token. This code will be put in routes before the route code is executed. 
PlansController.use(function(req, res, next) { 

    // check header or url parameters or post parameters for token 
    var token = req.body.token || req.query.token || req.headers['x-access-token']; 

    // If token is there, then decode token 
    if (token) { 

    // verifies secret and checks exp 
    jwt.verify(token, secret.superSecret, function(err, decoded) { 
     if (err) { 
     return res.json({ success: false, message: 'Failed to authenticate token.' }); 
     } else { 
     // if everything is good, save to incoming request for use in other routes 
     req.decoded = decoded; 
     next(); 
     } 
    }); 

    } else { 

    // if there is no token 
    // return an error 
    return res.status(403).send({ 
     success: false, 
     message: 'No token provided.' 
    }); 

    } 
}); 

// Routes 
PlansController.get('/', function(req, res){ 
    Plan.find({}, function(err, plans){ 
    res.json(plans); 
    }); 
}); 

、あなたはここで私のブログの記事、Node API Authentication with JSON Web Tokens - the right wayの詳細をチェックアウトすることができます。