Angular 使用 Interceptor (攔截器) 請求新增 token 並統一處理 API 錯誤

Donjan發表於2019-12-18
AngularAPI

前後端分離的專案，大多都是無狀態的，我們使用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 協議》，轉載必須註明作者和本文連結

相關文章