首页 文章

无法捕获AngularJS 2中的401错误

提问于
浏览
0

过去一周我一直在使用AngularJs2应用程序 . 这个应用程序有一个名为'CabBookingService'的服务,它进行http get()调用以从后端获取数据 . 后端基于REST,并使用Spring安全OAuth2实现进行身份验证 .

@Injectable()
export class CabBookingService {


private accessToken, bookingsUrl, bookings;

constructor(private _logger: Logger, private _http: Http) {
    this.accessToken = localStorage.getItem('cabservice_access_token');
    this.bookingsUrl = "http://52.3.51.119:8081/dynamo-server/dynamo/api/cabservice/bookings/list/submitted?access_token=" + this.accessToken;
}

getCabBookings() {
    this._logger.log("Getting Cab Bookings ...accessToken, bookingsUrl = " + this.accessToken + "," + this.bookingsUrl);

    return this._http.get(this.bookingsUrl)
        .map(res => {
            this._logger.log("response status = " + res.status);
            return <CabBooking[]> res.json().cabBooking;
        })
        .catch(this.handleError);
}

private handleError(error: Response) {
    console.error("Error occured in getting bookings...response: type, ok, url, status, headers:  " + error.type + ", " + error.ok + ", " +
        error.url + ", " + error.status + ", " + JSON.stringify(error.headers));
    return Observable.throw(error.json().headers || 'Server error');
}
}

如代码所示,该服务使用存储在HTTP请求中的浏览器本地存储中的令牌 . 当令牌有效时,我获得了我在下面的Angular组件中处理的数据 .

this._cabBookingService.getCabBookings()
        .subscribe(
            bookings => {
                this.bookings = bookings;
                this._logger.log("Bookings => " + JSON.stringify(this.bookings));
            },
            err => {
                this._logger.log("Error while accessing cab bookings...error, JSONed = " + err.status + "," + JSON.stringify(err));
            },
            () => console.log('Bookings Fetched!');
            );

当令牌过期并且当我调用服务来获取数据时,服务器会抛出401错误 . 通过查看Chrome浏览器开发人员工具“网络”标签可以确认这一点 .

Chrome browser developer tab showing 401 error while using Angular HTTP Get. The console message that follows shows 200 instead of 401.

我遇到的问题是我无法捕获此401错误 . 当我在handleError()方法中记录错误时,我得到以下内容:

Error occured in getting bookings...response: type, ok, url, status, headers:  3, undefined, null, 200, "[]"

也就是说,日志显示200个HTTP代码而不是401.如果我需要做任何不同的事情,请告诉我 .

1 回答

  • 0

    检查网络日志中的HTTP方法 . 如果您正在编写HTML5应用程序,请在服务器中为CORS允许'option' . 例如,您可以将其添加到PHP服务器页面 .

    <?php
        header('Access-Control-Allow-Origin: *');
        header("Access-Control-Allow-Headers: Origin, Content-Type, Authorization");
        header("Access-Control-Allow-Methods: GET, POST, PUT, OPTIONS, DELETE");
    ?>
    

相关问题