Question

我正在尝试一个简单的登录/注册表单。我希望在用户在服务器端成功时在客户端Angular应用程序上显示登录成功消息。从我发送的服务器端

res.json( {
  title: 'Success',
  message: "Success!",
  token: token // using jsonwebtoken
});

我使用userService进行身份验证。这是身份验证方法。

authenticateUser(user: User): Observable<any>{
    const submittedUser = JSON.stringify(user);
    const headers = new Headers({ 'Content-Type': 'application/json'});
    const options = new RequestOptions({headers: headers});
    return this.http.post( baseURL + 'user/signin', submittedUser, options)
      .map(response => this.processHttpmsgService.extractData(response))
      .catch(error => Observable.throw(error));
  }

这是使用processHttpmsgService，它只是将响应对象转换为json。这是extractData方法。

public extractData(res: Response) {
    let body = res.json();
    console.log(body);  // server sent data available here.
    return body;
  }

现在，服务器发送的数据对象可用于extractData（）方法。但是当我回到signin组件中的onSubmit（）方法时。在订阅时，数据不可用。这是我的onSubmit（）方法。

onSubmit() {
    this.user = this.signinForm.value;
    this.userService.authenticateUser(this.user) 
      .subscribe(data => {
        this.data = data;
        console.log(data);   // undefined
        console.log(this.data);  // undefined
        localStorage.setItem('token', this.data.token);
        this.router.navigateByUrl('/');
      },
                error => {console.error(error); this.router.navigateByUrl('/signin');});
    this.signinForm.reset();

  }

我不知道为什么数据在onSubmit方法中变得不确定。我希望我正在进行正确的方法调用。

Answer 1

Json中的字符串应该是双引号。尝试更改标题：

{
    title: "Success",
    message: "Success!",
    token: token // using jsonwebtoken
 }

http://www.json.org/

Answer 2

尝试更改

return this.http.post( baseURL + 'user/signin', submittedUser, options)
      .map(response => this.processHttpmsgService.extractData(response))
      .catch(error => Observable.throw(error));

到

return this.http.post( baseURL + 'user/signin', submittedUser, options)
      .map(response => response.json())
      .catch(error => Observable.throw(error));

Answer 3

尝试删除map（），应该可以工作：

return this.http.post( baseURL + 'user/signin', submittedUser, options)
          .catch(error => Observable.throw(error));

如何从Angular前端的服务器获取数据

3 个答案: