2016-07-30 4 views
0

Ich habe eine Reihe von REST-Web-Services von Spring Boot. Diese Web-Services sind durch eine einfache HTTP-Authentifizierung geschützt.eckig2 authentifizieren zu Frühling http grundlegende Auth mit Endbenutzer-Credentials

Ich versuche ein Angular2 Frontend zu erstellen, gehostet auf einem anderen Server. Ich möchte, dass das Front-End mit dem Spring-Boot-Back-End interagiert, wobei die vom Benutzer am Front-End bereitgestellten Zugangsdaten verwendet werden.

Im Moment kann sich der Benutzer über das angular2-Frontend anmelden, aber selbst mit Benutzerauthentifizierung erfordert jeder Anruf an das Backend eine Authentifizierung, was ganz normal ist.

Also meine Frage ist: Wie kann ich angular2 sagt nur die Berechtigung Header mit den Anmeldeinformationen des Benutzers automatisch hinzuzufügen, wenn der Benutzer angemeldet ist?

Danke für Ihre Hilfe

Antwort

1

Ich würde auf einen Blick, was Ben Nadel hat http://www.bennadel.com/blog/3047-creating-specialized-http-clients-in-angular-2-beta-8.htm getan (oder die Typoskript Version von Sam Storie https://blog.sstorie.com/adapting-ben-nadels-apigateway-to-pure-typescript/). Ich hatte noch keine Chance, dies in einer App zu verwenden, aber es scheint sehr vielversprechend zu sein.

Auch, wenn Sie nicht bereits, würde ich mir Dave Syer Spring Boot und AngularJS Tutorials (https://spring.io/guides/tutorials/spring-security-and-angular-js/). Sie sind für Angular 1 geschrieben, aber sie sind sehr nützlich.

Unten ist meine "Lösung". Es funktioniert, aber ich bin nicht begeistert, mit ihm:

main.ts:

import { CsrfBaseRequestOptions } from './app/shared'; 

bootstrap(AppComponent, [ 
    ROUTER_PROVIDERS, 
    HTTP_PROVIDERS, 
    ... 
    provide(RequestOptions, { useClass: CsrfBaseRequestOptions }) 
]); 

XhrBaseRequestOptions:

@Injectable() 
export class XhrBaseRequestOptions extends BaseRequestOptions { 

    constructor() { 
    super(); 

    this.headers.append('X-Requested-With', 'XMLHttpRequest'); 
    } 

} 

CsrfBaseRequestOptions:

import { Injectable } from '@angular/core'; 
import { XhrBaseRequestOptions } from './xhr-base-request-options'; 

@Injectable() 
export class CsrfBaseRequestOptions extends XhrBaseRequestOptions { 

    constructor() { 
    super(); 

    let csrfToken = this.getCsrfToken('X-CSRF-TOKEN'); 
    if (csrfToken) { 
     this.headers.append('X-CSRF-TOKEN', csrfToken); 
    } 
    } 

    getCsrfToken(tokenName:string):string { 
    let tokenNameEQ = tokenName + '='; 
    let ck = document.cookie; 
    let ca = ck.split(';'); 

    for (let i = 0; i < ca.length; i++) { 
     let c = ca[i]; 
     while (c.charAt(0) === ' ') c = c.substring(1, c.length); 
     if (c.indexOf(tokenNameEQ) === 0) return c.substring(tokenNameEQ.length, c.length); 
    } 
    return null; 
    } 

} 
+0

Danke, ich werde einen Blick darauf werfen. Aber was sind die XhrBaseRequestOptions? – Eric

+0

Entschuldigung, ich antwortete zu schnell. Die XhrBaseRequestOptions ist eine Klasse, die ich erstellt habe, um BaseRequestOptions zu erweitern (es könnte RequestOptions sein, ich vergesse und ich bin nicht vor meinem Computer). Wenn Sie BaseRequestOptions für XhrBaseRequestOptions eingeben, sollte es funktionieren. Ich werde den Code bearbeiten, wenn ich meinen Computer bekomme. – dspies

+0

Vielen Dank, es macht den Job! Ich musste einfach 'this.withCredentials = true;' hinzufügen und jetzt funktioniert es perfekt. – Eric

1

Wir haben eine ähnliche Situation und verwendet einen benutzerdefinierten Service, um die Auth-Header zu behandeln.

Der Dienst hat ein Http injiziert und wenn ein JWT in localstorage verfügbar ist es fügt die Auth-Header an den get/post request

let authHeader = new Headers(); 
authHeader.append('Authorization', 'Bearer ' + jwt); 

Und es dann über

auf die Anfrage hinzufügen
this.http.get(url, { headers: authHeader }); 

Hoffe, dass hilft ...

Verwandte Themen