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基本验证

回答

相关问题