Wie füge ich jedem Header einen Json-Web-Token hinzu?

Question

Also versuche ich JSON-Web-Token für die Authentifizierung zu verwenden und versuche nicht, herauszufinden, wie man sie an einen Header anhängt und sie auf Anfrage sendet.

Ich habe versucht, https://github.com/auth0/angular2-jwt zu verwenden, aber ich konnte es nicht mit Angular arbeiten und gab auf, und dachte, ich könnte nur herausfinden, wie entweder senden Sie die JWT in jeder Anfrage oder senden Sie es in der Kopfzeile (vorzugsweise die Kopfzeile) . Es war nur ein bisschen härter als ich dachte.

Hier ist meine Anmeldung

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']); 
      } 
     ); 

    } 

und meine login.service

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

Ich weiß, dass sie gebraucht werden nicht wirklich, aber vielleicht würde es helfen! Sobald dieses Token erstellt und ich es gespeichert habe, möchte ich 2 Dinge tun, senden Sie es in der Kopfzeile und extrahieren das Ablaufdatum, das ich mit diesem eingab.

Einige der Node.js anmelden Code

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

Jetzt versuche ich es nur über einen Winkel Service mit diesem Service zurück zu Knoten zu übergeben.

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

JWT ist mein Webtoken im lokalen Speicher, den ich durch meine Komponente an den Dienst übergebe.

Ich bekomme keine Fehler, aber wenn es zu meinem Node-Server kommt bekomme ich es nie in der Kopfzeile.

'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

Erstellen Sie eine benutzerdefinierte http-Klasse und überschreiben Sie die request-Methode, um das Token in jeder http-Anfrage hinzuzufügen. Jetzt

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); 
    }; 
    } 
} 

, müssen wir unser Hauptmodul konfigurieren, dass der XHRBackend unsere Gewohnheit http-Klasse zu bieten. In Ihrer Hauptmodul Erklärung, fügen Sie folgendes zu dem Array-Anbieter:

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 ] 
}) 

Danach app.module.ts, können Sie jetzt Ihre individuellen http-Provider in Ihren Diensten nutzen. Zum Beispiel:

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

Ich sehe mehrere Optionen für jede Anforderung einen Kopf transparent zu setzen:

• einen Httpclient-Dienst implementieren anstelle des Standard-Http zu verwenden.
• Ihre eigene Implementierung der Klasse RequestOptions Geben
• Aufschalten der es Http Klasse selbst

So können Sie Ihre Header an einem Ort, und dies würde auswirken aok Ihre HTTP Anrufe einstellen könnte.

Siehe folgende Fragen:

• 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

Hier ein Beispiel aus Angular-Code ist Pläne zum Beispiel zu erhalten, schreiben Sie es einfach so,

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

und auf Ihrem Server, Sie können dies tun,

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); 
    }); 
}); 

Wenn Sie immer noch nicht klar sind, können Sie hier die Details auf meiner Blog-Post Check-out, Node API Authentication with JSON Web Tokens - the right way.