rxjs的角發布：捕獲錯誤

Question

我借助一些教程在我的角度應用程序中創建了身份驗證服務。 幸福的路徑工作正常，但我無法處理401錯誤等。在這種情況下，不會調用我的map函數。

任何想法如何處理登錄錯誤？

login(username: string, password: string): Observable<boolean> {

        return this.http.post(environment.baseUrl + '/api/authenticate', JSON.stringify({ username: username, password: password }))
            .map((response: Response, error: any) => {

                console.log('mapping response...', response.status.toString());

                // login successful if there's a jwt token in the response
                const token = response.json() && response.json().token;
                if (token) {
                    // set token property
                    this.token = token;

                    // store username and jwt token in local storage to keep user logged in between page refreshes
                    localStorage.setItem('currentUser', JSON.stringify({ username: username, token: token }));

                    // return true to indicate successful login
                    return true;
                } else {
                    // return false to indicate failed login
                    return false;
                }
            });

    }

Answer 1

您可以嘗試添加一個這樣的捕獲：

    return this.http.post(environment.baseUrl + '/api/authenticate', JSON.stringify({ username: username, password: password }))
        .map((response: Response) => {

            console.log('mapping response...', response.status.toString());

            // login successful if there's a jwt token in the response
            const token = response.json() && response.json().token;
            if (token) {
                // set token property
                this.token = token;

                // store username and jwt token in local storage to keep user logged in between page refreshes
                localStorage.setItem('currentUser', JSON.stringify({ username: username, token: token }));

                // return true to indicate successful login
                return true;
            } else {
                // return false to indicate failed login
                return false;
            }
        })
         .catch(this.handleError);


private handleError(error: Response): Observable<any> {
    // in a real world app, we may send the server to some remote logging infrastructure
    // instead of just logging it to the console
    console.error(error);
    return Observable.throw(error.json().error || 'Server error');
}

或返回false，可以如下更改：

import 'rxjs/add/observable/of';

private handleError(error: Response): Observable<any> {
    // in a real world app, we may send the server to some remote logging infrastructure
    // instead of just logging it to the console
    console.error(error);
    return Observable.of(false);
}

Answer 2

您可以嘗試：

app.config(['$httpProvider', function($httpProvider) {

    $httpProvider.interceptors.push(function($q) {

        return {

            'responseError': function(rejection){

                var defer = $q.defer();

                if(rejection.status == 401){
                    console.dir(rejection);
                }

                defer.reject(rejection);

                return defer.promise;

            }
        };
    });

    }]);