Angular2 Spring身份验证_Spring_Angular

Angular2 Spring身份验证

spring angular

Angular2 Spring身份验证,spring,angular,Spring,Angular,我有单独的Angular2客户端和Spring托管服务器。我的Angular2应用程序能够调用spring的rest调用。但是，我在使用Spring进行CSRF身份验证时遇到了一些困难 main.ts: import { CsrfBaseRequestOptions } from './app/shared'; bootstrap(AppComponent, [ ROUTER_PROVIDERS, HTTP_PROVIDERS, ...

我有单独的Angular2客户端和Spring托管服务器。我的Angular2应用程序能够调用spring的rest调用。但是，我在使用Spring进行CSRF身份验证时遇到了一些困难

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

    }

    index.ts

    onSubmit(event, username, password) {
            this.headers = new Headers();
            this.headers.append("Content-Type", 'application/json');
            let body = JSON.stringify({username, password});
            this.http.post('http://localhost:8080/EEP/test', body, { headers: this.headers })
                .subscribe((res) => this.token = res.json())


        }

main.ts：
从“./app/shared”导入{CsrfBaseRequestOptions}；
引导程序（AppComponent[
路由器供应商，
HTTP_提供商，
...
提供（RequestOptions，{useClass:CsrfBaseRequestOptions}）
]);
XhrBaseRequestOptions：
@可注射（）
导出类XhrBaseRequestOptions扩展了BaseRequestOptions{
构造函数（）{
超级（）；
this.headers.append（'X-request-With'，'XMLHttpRequest'）；
}
}
CsrfBaseRequestOptions：
从“@angular/core”导入{Injectable}；
从“./xhr基本请求选项”导入{XhrBaseRequestOptions}；
@可注射（）
导出类CsrfBaseRequestOptions扩展了XhrBaseRequestOptions{
构造函数（）{
超级（）；
让csrfToken=this.getCsrfToken（'X-CSRF-TOKEN'）；
if（csrfToken）{
this.headers.append（'X-CSRF-TOKEN'，csrfToken）；
}
}
getCsrfToken（令牌名称：string）：string{
让tokenNameEQ=tokenName+'='；
设ck=document.cookie；
设ca=ck.split（“；”）；
for（设i=0；ithis.token=res.json（））
}

听说什么也没发生

如果您能帮我打电话给Spring，请提前感谢。

我想您可以使用RC2提供的Angular2的自动XSRF处理。这是由

XSRFHandler

类在后台完成的，不需要显式地将cookie添加到请求中

请参阅以下链接：

我认为您可以使用RC2提供的Angular2的自动XSRF处理。这是由

XSRFHandler

类在后台完成的，不需要显式地将cookie添加到请求中

请参阅以下链接：

CookieXSRFStrategy和XSRFHandler在@angular/http包下的my node_模块中不可用。因此，从“@angular/HTTP”导入{HTTP_PROVIDERS，XSRFHandler，CookieXSRFHandler}语句时ts文件中的ide给出编译错误这两个类都位于

xhr_backend.ts

文件中。请参阅此链接：。您使用哪一个Angular2版本？xhr_backend.ts中缺少XSRFHandler..我找到了XSRFStrategy？.是同一个文件吗？Hi Thierry，我已经实现了所有的更改，这些更改表明我的项目实际上是通过package.json更改构建到rc4的rc1。现在我已经实现了HTTP_提供程序作为CookieXSRFStrategy>>>>>>>>HTTP_提供程序，{provide:XSRFStrategy，useValue:new CookieXSRFStrategy（'my-XSRF-COOKIE-NAME'，'my-XSRF-HEADER-NAME'），路由器提供程序，提供（LocationStrategy，{useClass:HashLocationStrategy}），PersonService）；但是问题在于发布代码spring服务器没有被命中>>>>>>>>>>onSubmit（事件，用户名，密码）{var json=json.stringify（{username:username，password:password}）；this.headers=new CookieXSRFStrategy（）；let body=json.stringify（{username，password}）；let options=new RequestOptions（{headers:this.headers}）；this.http.get（''，body，options）.subscribe（（res）=>this.token=res.json（））}…请建议..谢谢！！CookieXSRFStrategy和XSRFHandler在@angular/http包下的my node_模块中不可用。因此，从“@angular/HTTP”导入{HTTP_PROVIDERS，XSRFHandler，CookieXSRFHandler}语句时ts文件中的ide给出编译错误这两个类都位于

xhr_backend.ts