在Angular 6中使用拦截器来在获取新令牌后再次发送请求,可以按照以下步骤进行操作:
token.interceptor.ts
的文件,并在其中编写拦截器代码。import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
import { AuthService } from './auth.service';
@Injectable()
export class TokenInterceptor implements HttpInterceptor {
constructor(private authService: AuthService) {}
intercept(request: HttpRequest, next: HttpHandler): Observable> {
// 在请求头中添加授权令牌
const token = this.authService.getToken();
request = request.clone({
setHeaders: {
Authorization: `Bearer ${token}`
}
});
return next.handle(request).pipe(
catchError(err => {
// 如果请求返回401错误,表示令牌已过期
if (err.status === 401) {
// 获取新令牌
return this.authService.getNewToken().pipe(
switchMap((newToken: string) => {
// 更新令牌并重新发送原始请求
this.authService.setToken(newToken);
request = request.clone({
setHeaders: {
Authorization: `Bearer ${newToken}`
}
});
return next.handle(request);
}),
catchError(error => {
// 处理获取新令牌的错误
// 例如,重定向到登录页面
return throwError(error);
})
);
}
return throwError(err);
})
);
}
}
auth.service.ts
的文件,并在其中编写用于获取和设置令牌的服务代码。@Injectable({
providedIn: 'root'
})
export class AuthService {
private token: string;
getToken(): string {
return this.token;
}
setToken(token: string): void {
this.token = token;
}
getNewToken(): Observable {
// 在此处编写获取新令牌的逻辑
// 例如,发送一个请求到服务器来获取新令牌
// 并返回一个Observable
}
}
AppModule
的提供者列表中。import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { TokenInterceptor } from './token.interceptor';
@NgModule({
imports: [HttpClientModule],
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: TokenInterceptor,
multi: true
}
]
})
export class AppModule {}
通过以上步骤,你可以创建一个拦截器来在每个请求中添加授权令牌。如果请求返回401错误(表示令牌过期),拦截器会调用getNewToken()
方法来获取新令牌,并在获取到新令牌后重新发送原始请求。