问题描述
我正在尝试使用角度拦截器实现刷新令牌功能。这是我要遵循的分步程序
-
将访问令牌存储在本地存储中。将此令牌添加到授权标头中。
-
如果访问令牌已过期，请发送刷新令牌（存储在数据库中）并生成一个新令牌。
在以下代码中，我试图实现相同的功能。但是问题是当访问令牌过期时，当前的HTTP请求无法执行（给出401错误）。我必须重新加载该页面才能使该HTTP请求正常工作。如何避免这种情况？
interceptor.ts
export class HttpErrorInterceptor implements HttpInterceptor {
constructor(private router: Router,private loginService: LoginService) { }
intercept(request: HttpRequest<any>,next: HttpHandler): Observable<HttpEvent<any>> {
const jwt = localStorage.getItem('token')
if (jwt) {
request = request.clone({
setHeaders: {
Authorization: `Bearer ${jwt}`
}
});
}
if (!request.headers.has('Content-Type')) {
request = request.clone({ headers: request.headers.set('Content-Type','application/json') });
}
return next.handle(request)
.pipe(
retry(1),catchError((error: HttpErrorResponse) => {
let errorMessage = '';
if (error.error instanceof ErrorEvent) {
// client-side error
errorMessage = `${error.error.message}`;
} else {
// console.log(error)
switch (error.status) {
case 401: {
console.log(error.error.error.message)
console.log(error)
if (error.error.error.message.includes('jwt expired')) {
console.log(true)
this.handle401Error(request,next)
}
else {
console.log(false)
this.router.navigate(['login'])
}
}
default:
//window.alert(error.error.error.message)
return throwError(error);
}
// server-side error
// errorMessage = `${error.status}\n ${error.message}`;
}
//\ window.alert(errorMessage);
// return throwError(errorMessage);
})
)
}
private handle401Error(request: HttpRequest<any>,next: HttpHandler) {
console.log('refresh token')
const refreshToken = localStorage.getItem('refreshtoken')
console.log(refreshToken)
this.loginService.refresh_token(refreshToken)
.pipe(untilDestroyed(this))
.subscribe(data => {
console.log(data)
localStorage.setItem('token',data.accessToken)
const jwt = localStorage.getItem('token')
console.log('401',jwt)
if(jwt) {
request = request.clone({
setHeaders: {
Authorization: `Bearer ${jwt}`
}
});
}
if (!request.headers.has('Content-Type')) {
request = request.clone({ headers: request.headers.set('Content-Type','application/json') });
}
return next.handle(request);
})
}
}
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）