Question

我是angular 4和REST API开发的新手。我在后端开发了一个Login API，当我使用Postman调用它时它工作正常：

在作为Angular 4项目的前端应用程序中，我创建了一个服务来调用此登录API。这是我在此服务中创建的方法：

sendCredential(username: string, password: string) {
    const url = 'http://localhost:8080/authenticate/user';
    const body = '{"username": "' + username + '", "password": "' + password + '"}';
    const headers = new Headers(
        {
            'Content-Type': 'application/json'
        });
    return this.http.post(url, body, {headers: headers});
}

我的第一个问题是： 这是传递json对象并调用此API的正确方法吗？

我还创建了一个调用服务中方法的组件。这是我在这个组件中创建的方法/事件处理程序：

onSubmit(uname: string, pwd: string) {
    this.loginService.sendCredential(uname, pwd).subscribe(
        res => {
            this.loggedIn = true;
            localStorage.setItem('PortalAdminHasLoggedIn', 'true');
            location.reload();
        },
        err => console.log(err)
    );
}

我的第二个问题是： 我应该如何检查令牌是否被退回还是错误？

Answer 1

问题1：

当您在角度中执行http.post()时，不需要对主体对象进行字符串化。只需使用普通对象即可，Http类将帮助您在内部解析它：

sendCredential(username: string, password: string) {
    const url = 'http://localhost:8080/authenticate/user';
    //do not need to stringify your body
    const body = {
        username, password
    }
    const headers = new Headers(
        {
            'Content-Type': 'application/json'
        });
    return this.http.post(url, body, {headers: headers});
}

问题2：

至于您的错误，请注意Angular还会捕获每个http错误。并且http错误表示任何<200或>=300的状态代码都是错误的。因此，只有200到300之间的状态代码才被认为是成功的。收到错误后，angular会抛出Observable错误，您需要明确处理（正确执行）：

onSubmit(uname: string, pwd: string) {
    this.loginService.sendCredential(uname, pwd).subscribe(
        res => {
            //token should be in your res object
            this.loggedIn = true;
            localStorage.setItem('PortalAdminHasLoggedIn', 'true');
            location.reload();
        },
        err => {
            //handle your error here.
            //there shouldn't be any token here
            console.log(error);
        }
    );
}

使用上面的代码，您应该在成功的回调中收到令牌，它将在res对象中。如果出现错误，则不应收到任何令牌，您应该在错误回调时处理错误。

使用Angular 2/4将json发布到API

1 个答案:

问题1：

问题2：