2016-09-29 88 views
2

我试图从使用Spring Security的Angular2表单验证我的用户,但它不工作。我看过所有网站上,但似乎没有找到正确的答案吧,可能有人指出我要去的地方错了 -Angular2的Spring Security

下面是从我的弹簧security.xml文件片段 -

<security:form-login login-page="/" 
         authentication-failure-url="/security/login" 
         default-target-url="/"/> 

    <security:access-denied-handler error-page="/security/denied"/> 
    <security:logout invalidate-session="true" 
        logout-success-url="/security/logout/success" 
        logout-url="/security/logout"/>    

这里是我的angular2形式 -

<form (ngSubmit)="onLogin(f.value)" class="form-horizontal" role="form" #f="ngForm"> 
        <div class="form-group"> 
         <label class="col-sm-3 control-label" for="j_username">Username:</label> 
         <div class="col-sm-8"> 
          <input type="text" class="form-control" placeholder="Username" name="j_username" [(ngModel)]="user.userName" 
            maxlength="50" id="j_username" required > 
         </div> 
        </div> 
        <div class="form-group"> 
         <label class="col-sm-3 control-label" for="j_password">Password:</label> 
         <div class="col-sm-8"> 
          <input type="password" class="form-control" placeholder="Password" name="j_password" [(ngModel)]="user.password" 
            maxlength="50" id="j_password" required> 
         </div> 
        </div> 
        <div class="form-group"> 
         <div class="col-sm-offset-8 col-sm-10"> 
          <input type="submit" class="btn btn-default" value="Login"> 
         </div> 
        </div> 
       </form> 

而这里的组件代码 -

onLogin(f) { 
    this.userService.makeHttpCall(f); 
} 

和FIN盟友的服务,称为春季安全 -

makeHttpCall(f): void { 
    let userName = f['j_username']; 
    let password = f['j_password']; 
    let data = 'j_username='+userName+'&j_password='+password; 
    console.log(data); 
    let headers = new Headers({'Content-Type': 'application/x-www-form-urlencoded'}); 
    let options = new RequestOptions({headers: headers} 
       ); 
    this.http.post('/j_spring_security_check', data, options) 
     .map(this.extractData) 
     .catch(this.handleError); 


} 

有人可以指出我要去哪里错了吗?这个http调用并没有让我的spring安全配置中定义的AuthenticationManager。

回答

3

在Angular2中,只要您订阅了它们,就会触发HTTP调用。像这样调整代码:

this.http.post('/j_spring_security_check', data, options) 
    .map(this.extractData) 
    .catch(this.handleError). 
    .subscribe(data => { 
     // do something here with the response 
    }) 
+0

谢谢马特!它确实有用!我的第一个不好,我有调试器放在服务器端的代码,它永远不会让这个调用返回任何东西。 – Pratik

+0

不客气。我的问题听起来很熟悉:) – Matt