angular - 如何对 http 401 做出 Angular 响应

Question

我有一个 nodejs (express) 作为服务器端，一个 angular 6 作为客户端。在服务器中我有中间件功能，可以进行 session 检查。如果 session 无效或不存在，我想向客户端发送响应，以便它可以对其使用react。我想从服务器返回 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 状态。但是请注意 interceptor 的 range 它的工作方式与 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