如何对 http 401 做出角度响应

Question

我有一个 nodejs (express) 作为服务器端，一个 angular 6 作为客户端。在服务器中，我有一个中间件功能，可以进行会话检查。如果会话无效或不存在，我想向客户端发送响应，以便它可以对其做出反应。我想从服务器返回一个 401 的响应代码，并在客户端制作某种 listener\route-guard\HttpInterceptor，这样 - 它可以管理客户端中的情况（例如，将其重定向到登录页面） . 这是我在服务器中的代码：

router.use('/', (req, res, next) =>
{
    if (!req.session.user)
    {
        res.status(401);
    }
    else{
        next();
    }
})

如何在 Angular 应用程序中捕捉\收听此响应？

Answer 1

您可以创建一个HttpInterceptor，您可以在其中检查状态是否为 401，如果是，则注销用户并重定向到登录页面。 HttpInterceptor 所做的是拦截每个请求和响应，并允许您执行一些特定操作，例如检查 servce 是否返回 401 状态。但是请注意 range 对于 interceptor 它的工作方式与 services 类似，因此如果您将其包含在顶级模块中，那么它将拦截每个请求和响应

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
    constructor( 
       private authService: AuthService
    ) { }
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return next.handle(request).pipe(
            map((event: HttpEvent<any>) => event), // pass further respone
            catchError((error: HttpErrorResponse) => {
                // here will be catched error from response, just check if its 401
                if (error && error.status == 401)
                    // then logout e.g. this.authService.logout()
                return throwError(error);
            }));
    }
}

然后将其包含在提供者部分的app.httpmodule 中

providers: [
  {
    provide: HTTP_INTERCEPTORS,
    useClass: AuthInterceptor,
    multi: true
  },
]

在angular.io docs 或angular.io guide 了解更多信息

Answer 2

当您点击 http 调用时，会出现两个参数。 第一：成功回调。第二：错误回调。

例如，如果我们有一个名为api 的服务，下面将是完整的代码：

如果需要捕获服务中的错误：

 getData(){ 
  this._http.get(url).map((response: Response) =>{
     return response.json();    
   })
     .catch(this.handelError) 
}

handelError(error: Response){
   console.log('got below error from server',error);
}

如果需要在组件中捕获错误：

 someMethod(){

    this._apiService.getData().susbscribe((result)=>{
         console.log('sucess',result);
        // do further processing
    },(error)=>{
        console.log('error from service',error);
        // do further processing
     });
}