angular2驗證到春季最終用戶憑據的HTTP基本驗證

我有一大堆的動力由Spring啓動REST Web服務。這些Web服務受基本http認證保護。angular2驗證到春季最終用戶憑據的HTTP基本驗證

我嘗試創建一個Angular2前端，在另一臺服務器上託管。我希望前端使用前端用戶提供的憑據與Spring後端進行交互。

現在，用戶可以通過angular2前端登錄，但隨後，即使用戶進行身份驗證，每次調用後端需要身份驗證，這是正常的，我猜。

所以我的問題是：我怎麼能告訴angular2自動添加與用戶憑據授權頭只有當用戶登錄？

感謝您的幫助

2016-07-30 Eric

我想看看什麼奔納德爾做http://www.bennadel.com/blog/3047-creating-specialized-http-clients-in-angular-2-beta-8.htm（或由山姆Storie https://blog.sstorie.com/adapting-ben-nadels-apigateway-to-pure-typescript/的打字稿版）。我還沒有機會在應用中使用它，但它看起來非常有前途。此外，如果你還沒有，我會看看Dave Syer的Spring Boot和AngularJS教程（https://spring.io/guides/tutorials/spring-security-and-angular-js/）。它們是爲Angular 1編寫的，但它們非常有用。

下面是我的「解決方案」。它的工作原理，但我並不感到它：

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

}

來源

2016-07-31 01:11:20 dspies

謝謝，我會去看一下這一個。但是什麼是XhrBaseRequestOptions？ – Eric

對不起，我很快就回答了。 XhrBaseRequestOptions是我爲擴展BaseRequestOptions而創建的類（它可能是RequestOptions，我忘記了，而且我不在我的計算機前面）。如果您將BaseRequestOptions放入XhrBaseRequestOptions中，它應該可以工作。當我拿到我的電腦時，我會編輯代碼。 – dspies

非常感謝，它完成了這項工作！我只需要添加'this.withCredentials = true;'現在它完美地工作。 – Eric

我們有類似的情況，使用自定義的服務來處理身份驗證頭。

這項服務已經一個Http注入，如果一個智威湯遜在localStorage的可用它增加了AUTH頭的GET/POST請求

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

然後它通過

this.http.get(url, { headers: authHeader });

添加到請求

希望幫助...

來源

2016-07-31 13:28:23 TommyF

angular2驗證到春季最終用戶憑據的HTTP基本驗證

回答

相關問題