如何使 angular 响应 http 401
how to make angular response to http 401
我有一个 nodejs (express) 作为服务器端,一个 angular 6 作为 client.In 服务器我有中间件功能,可以进行会话检查。如果会话无效或不存在,我想向客户端发送响应,以便它可以对其做出反应。我想从服务器返回 401 的响应代码,并在客户端中进行某种 listener\route-guard\HttpInterceptor,因此 - 它可以管理客户端中的情况(例如,将其重定向到登录页面)。
这是我在服务器中的代码:
router.use('/', (req, res, next) =>
{
if (!req.session.user)
{
res.status(401);
}
else{
next();
}
})
如何 catch\listen 在 angular 应用程序中对此响应?
您可以创建一个 HttpInterceptor
,您可以在其中检查状态是否为 401,如果是,则注销用户并重定向到登录页面。 HttpInterceptor
所做的是拦截每个请求和响应,并允许您执行一些特定操作,例如检查服务是否返回 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
},
]
阅读更多内容
当您点击 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
});
}
我有一个 nodejs (express) 作为服务器端,一个 angular 6 作为 client.In 服务器我有中间件功能,可以进行会话检查。如果会话无效或不存在,我想向客户端发送响应,以便它可以对其做出反应。我想从服务器返回 401 的响应代码,并在客户端中进行某种 listener\route-guard\HttpInterceptor,因此 - 它可以管理客户端中的情况(例如,将其重定向到登录页面)。 这是我在服务器中的代码:
router.use('/', (req, res, next) =>
{
if (!req.session.user)
{
res.status(401);
}
else{
next();
}
})
如何 catch\listen 在 angular 应用程序中对此响应?
您可以创建一个 HttpInterceptor
,您可以在其中检查状态是否为 401,如果是,则注销用户并重定向到登录页面。 HttpInterceptor
所做的是拦截每个请求和响应,并允许您执行一些特定操作,例如检查服务是否返回 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
},
]
阅读更多内容
当您点击 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
});
}