2016-11-29 67 views
1

为什么我的http.post不能在角2中工作。只是不知道我一直在想什么。http.post不能在角2中工作

这里是login.component.ts文件

export class LoginComponent implements OnInit{ 
model: any = {}; 
loading = false; 

constructor(
    private router: Router, 
    private authenticationService: AuthenticationService, 
    private alertService: AlertService 
){} 

ngOnInit(){ 
    // reset login status 
    this.authenticationService.logout(); 
} 

login(){ 
    let errMsg: string; 
    this.loading = true; 
    this.authenticationService.login(this.model.username, this.model.password) 
     .subscribe(
      data => { 
       console.log('Success'); 
       //this.router.navigate(['/']); 
      }, 
      error => { 
       console.log('Error'); 
       this.loading = false; 
      } 
     ); 
} 

这里是authentication.service.ts

@Injectable() 
export class AuthenticationService{ 

private baseUrl = '..'; 

constructor(private http: Http){} 

login(username: string, password: string): Observable<Response>{ 
    let body = JSON.stringify({username: username, password: password}); 
    let headers = new Headers({ 'Content-Type': 'application/json' }); 
    let options = new RequestOptions({ headers: headers}); 
    const url = `${this.baseUrl}/api/auth/login`; 

    return this.http.post(url, body, options) 
     .map(this.extractData) 
     .catch(this.handleError); 

} 

logout(){ 
    // remove user from local storage to log user out 
    localStorage.removeItem('currentUser'); 
} 

private extractData(res: Response) { 
    let body = res.json(); 
    return body.data || { }; 
} 

private handleError (error: Response | any) { 
    // In a real world app, we might use a remote logging infrastructure 
    let errMsg: string; 
    if (error instanceof Response) { 
     const body = error.json() || ''; 
     const err = body.error || JSON.stringify(body); 
     errMsg = `${error.status} - ${error.statusText || ''} ${err}`; 
    } else { 
     errMsg = error.message ? error.message : error.toString(); 
    } 
    console.error(errMsg); 
    return Observable.throw(errMsg); 
} 

这里是路线文件

const appRoutes: Routes = [ 
{ path: '', component: LoginComponent }, 
{ path: 'home', component: HomeComponent, canActivate: [AuthGuard] }, 
{ path: 'login', component: LoginComponent }, 

    // otherwise redirect to home 
    { path: '**', redirectTo: '' } 
]; 

@NgModule({ 
    imports: [ RouterModule.forRoot(appRoutes) ], 
    exports: [ RouterModule ] 
}) 

export class AppRoutingMoudle{} 

任何帮助将是赞赏。谢谢!

+0

任何错误使用它呢? 'AuthenticationService'上面有'Injectable'装饰器吗? –

+0

不,这里有一些错误,但我的应用程序很快就会登录到登录页面。还有更多。我在URL上得到这个:http:// localhost:3000 /?username = test&password = test。那么,为什么它会在URL中显示参数,因为它是一个post请求 – user3127109

+0

告诉我你打算在调用API时在URL中看到什么。 –

回答

0
import { Injectable } from '@angular/core'; 
import {Headers, Http, Response,RequestOptions} from '@angular/http'; 
import 'rxjs/add/operator/toPromise'; 
import {Observable} from 'rxjs/Observable'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/catch'; 


@Injectable() 

进口这些你的服务上面,然后做它的构造

constructor(private _http:Http) { } 

然后遵守前面在控制台this._http.post