ホームページ >ウェブフロントエンド >jsチュートリアル >angular9 でのインターセプターの使用法に関する簡単な説明
この記事では、angular9 でのインターセプターの使用について説明します。一定の参考値があるので、困っている友達が参考になれば幸いです。
# 関連チュートリアルの推奨事項: 「angular チュートリアル」
# インターセプターはトークンを均一に追加します#バックエンド管理システムを構築する場合、各リクエストのリクエストヘッダーにトークンを追加する必要があるため、angular のインターセプターについて学び、
#Interceptor の使用法
1. ネットワーク リクエスト用の http.service.ts を作成します
import { Injectable } from '@angular/core';import { HttpClient } from '@angular/common/http';@Injectable({ providedIn: 'root'})export class HttpService { constructor(private http: HttpClient) { } getData () { return this.http.get('/assets/mock/data.json') }}
2. noop.interceptor を作成します。 ts、インターセプタ実装コード
import { Injectable } from '@angular/core';import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpResponse} from '@angular/common/http';import { Observable } from 'rxjs';import { tap } from 'rxjs/operators';import { Router } from '@angular/router';/** 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('login')) { req = req.clone({ url, // 处理后的url,再赋值给req headers: req.headers.set('Authorization', 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(['/login']); }) ); }}
3. app.module.ts で
3.1HttpClientModule## を使用します #3.2 HttpService の登録
3.3 NoopInterceptor インターセプターの使用#
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';import { HttpService } from './auth/http.service';import { NoopInterceptor } from './auth/noop.interceptor';@NgModule({ imports: [ BrowserModule, HttpClientModule, AppRoutingModule ], providers: [ HttpService, { provide: HTTP_INTERCEPTORS, useClass: NoopInterceptor, multi: true } ], // ... 省略})
#インターセプター実装後の効果
# インターセプターは次のとおりです。通常はルーティング ガードと一緒に使用されます。 プログラミング関連の知識をさらに知りたい場合は、プログラミング学習コース
をご覧ください。 !以上がangular9 でのインターセプターの使用法に関する簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。