Angular 使用 Interceptor (拦截器) 请求添加 token 并统一处理 API 错误

前后端分离的项目，大多都是无状态的，我们使用JSON Web Tokens进行身份验证，但是每次请求都手动添加token这种事情是不可能做的，因为懒，这里就要用到拦截器Interceptor

创建src/app/app-auth-interceptor.module.ts实现拦截器

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const token = this.storage.retrieve('token'); // token保存在localstorage
    if (token) { // 如果有token，就添加
      req = req.clone({
        setHeaders: {
          Authorization: `Bearer ${token.access_token}`
        }
      });
    }
    return next.handle(req).pipe(
      tap(event => {
        if (event instanceof HttpResponse) { // 这里是返回，可通过event.body获取返回内容
          // event.body
        }
      }, error => { // 统一处理所有的http错误
        if (error instanceof HttpErrorResponse) {
          if (error.status == 401) {
            this.router.navigate(['/index/login']);
          } else if (error.status == 500) {
            this.notification.create('error', '出错拉', '请求失败,请刷新页面试一试');
          } else if (error.status == 504) {
            this.notification.create('error', '重要提醒', '你当前的网络不稳定哦！');
          } else {
            // this.message.create('warning', error.error['message']);
            this.modalService.error({
              nzTitle: 'Error',
              nzContent: error.error.message ? error.error.message : error.message
            });
          }
        } else {
          this.notification.create('error', '出错拉', '网络请求错误,请刷新页面试一试');
        }
      })
    )
  }

在src/app/app-routing.module.ts导入

import { AuthInterceptor } from './app-auth-interceptor.module';

并添加到providers

{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }

这样我们使用HttpClient的时候，如果有token就会自动添加header Authorization，返回http错误的时候，会弹窗提示错误信息。

博客：《PHP 微服务练兵》系列教程

本作品采用《CC 协议》，转载必须注明作者和本文链接