在Angular中使用Http拦截器
小于 1 分钟
- 新建拦截器 Service
HttpInterceptorService
@Injectable()
export class HttpInterceptorService implements HttpInterceptor {
constructor() {}
}
- 添加拦截器的实现代码
@Injectable()
export class HttpInterceptorService implements HttpInterceptor {
constructor() {}
timer;
intercept(
req: HttpRequest<any>,
next: HttpHandler
): Observable<HttpEvent<any>> {
let url = req.url;
const token = localStorage.getItem("token");
if (!token) {
// 节流 防止同时弹出多个
if (!this.timer) {
this.timer = setTimeout(() => {
clearTimeout(this.timer);
this.message.error("请先登录!");
}, 1000);
}
this.router.navigateByUrl("/");
return;
}
// 设置token
req = req.clone({
url,
headers: req.headers.set("Authorization", token),
});
return next.handle(req).pipe(
tap(
(event) => {
if (event instanceof HttpResponse) {
if (event.status != 200) {
console.log(event);
}
// if (event.status >= 500) {
// this.message.error("服务器错误,请联系管理员");
// }
}
},
(error) => {
this.message.error("服务器错误,请联系管理员");
// this.router.navigateByUrl("/");
}
)
);
}
}