如何使用angular9攔截器？-js教程-PHP中文網

如何使用angular9攔截器？

青灯夜游

發布： 2020-09-12 11:13:15

轉載

4144 人瀏覽過

如何使用angular9攔截器？

相關教學推薦：《angular教學》

攔截器統一加入token

我們在做一個後台管理系統時,需要給每個請求的請求頭裡面添加token,所以下面我們來了解一下angular的攔截器,並使用

攔截器使用

1.建立http.service.ts,用於網路請求

import { Injectable } from &#39;@angular/core&#39;;
import { HttpClient } from &#39;@angular/common/http&#39;;

@Injectable({
  providedIn: &#39;root&#39;
})
export class HttpService {

  constructor(private http: HttpClient) { }
  getData () {
    return this.http.get(&#39;/assets/mock/data.json&#39;)
  }
}

登入後複製

2.建立noop. interceptor.ts,攔截器實作代碼

import { Injectable } from &#39;@angular/core&#39;;
import {
  HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpResponse
} from &#39;@angular/common/http&#39;;

import { Observable } from &#39;rxjs&#39;;
import { tap } from &#39;rxjs/operators&#39;;
import { Router } from &#39;@angular/router&#39;;

/** Pass untouched request through to the next request handler. */
@Injectable()
export class NoopInterceptor implements HttpInterceptor {
    constructor (private router: Router) {}
  intercept(req: HttpRequest<any>, next: HttpHandler):
    Observable<HttpEvent<any>> {
    // 拦截请求,给请求头添加token
    let url = req.url // 可以对url进行处理
    let token = document.cookie && document.cookie.split("=")[1]
    // 登录请求排除在外
    // if (!url.includes(&#39;login&#39;)) {
        req = req.clone({
            url, // 处理后的url,再赋值给req
            headers: req.headers.set(&#39;Authorization&#39;, token)//请求头统一添加token
        })
    // }
    return next.handle(req).pipe(
        tap(
         event => {
          if (event instanceof HttpResponse) {
           console.log(event);
           if (event.status >= 500) {
            // 处理错误
           }
          }
         },
         error => {
          // token过期 服务器错误等处理
        //   this.router.navigate([&#39;/login&#39;]);
         })
       );
  }
}

登入後複製

3.在app.module.ts中使用

3.1imports中引入HttpClientModule

#3.2HttpService的註冊

3.3NoopInterceptor攔截器的使用

import { HttpClientModule, HTTP_INTERCEPTORS } from &#39;@angular/common/http&#39;;
import { HttpService } from &#39;./auth/http.service&#39;;
import { NoopInterceptor } from &#39;./auth/noop.interceptor&#39;;
@NgModule({
   imports: [
      BrowserModule,
      HttpClientModule,
      AppRoutingModule
   ],
   providers: [
      HttpService,
      { provide: HTTP_INTERCEPTORS, useClass: NoopInterceptor, multi: true }
   ],
   // ... 省略
})

登入後複製