在Angular 5中,如果你想要在接收到401响应时重定向到登录页面,你可以使用Angular的拦截器(Interceptor)功能来实现。拦截器允许你在请求发送之前或响应返回之后对它们进行拦截和处理。
以下是一个简单的示例,展示了如何创建一个拦截器来检查401响应,并在检测到时重定向到登录页面:
首先,使用Angular CLI生成一个新的拦截器:
ng generate service interceptors/auth
打开生成的auth.service.ts
文件,并实现HttpInterceptor
接口。在intercept
方法中,检查响应状态码是否为401,如果是,则重定向到登录页面。
import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, tap } from 'rxjs/operators';
import { Router } from '@angular/router';
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
constructor(private router: Router) {}
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
return next.handle(req).pipe(
catchError((error: HttpErrorResponse) => {
if (error.status === 401) {
// 重定向到登录页面
this.router.navigate(['/login']);
}
return throwError(error);
})
);
}
}
在app.module.ts
文件中,将新创建的拦截器添加到providers
数组中,并使用HTTP_INTERCEPTORS
令牌将其注册为拦截器。
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { AuthInterceptor } from './interceptors/auth.service';
@NgModule({
declarations: [
AppComponent,
LoginComponent
],
imports: [
BrowserModule,
HttpClientModule,
RouterModule.forRoot([
{ path: 'login', component: LoginComponent },
// 其他路由配置
])
],
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: AuthInterceptor,
multi: true
}
],
bootstrap: [AppComponent]
})
export class AppModule { }
现在,当你的Angular应用接收到401响应时,它将自动重定向到登录页面。
这个拦截器特别适用于需要身份验证的Web应用。当用户的会话过期或未经过身份验证时,服务器通常会返回401状态码。通过使用这个拦截器,你可以确保用户在接收到401响应时被重定向到登录页面,从而提高用户体验和应用的安全性。
请注意,为了使上述代码正常工作,你需要确保已经安装了Angular Router模块,并且在你的应用中正确配置了路由。
领取专属 10元无门槛券
手把手带您无忧上云