angular http请求封装（带token）
<p>1，创建一个ts文件；</p><p><img src="https://img2020.cnblogs.com/blog/1159910/202004/1159910-20200429143319365-1339322547.png"></p>
<p>2,base-interceptor.ts;写入代码：</p>
<div>
<div>import { Injectable } from '@angular/core';</div>
<div>import { Router,ActivatedRoute } from '@angular/router';</div>
<div>import {</div>
<div> HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpErrorResponse</div>
<div>} from "@angular/common/http";</div>
<div>import { PublicService } from "../public/public.service";</div>
<div>import { throwError } from 'rxjs';</div>
<div>import { catchError, retry } from "rxjs/operators";</div>
<div>import * as Cookies from 'js-cookie';</div>
<div>
<div>@Injectable()</div>
<div>export class BaseInterceptor implements HttpInterceptor {</div>
<div> public erors;</div>
<div> constructor(public router: Router, public url: PublicService) {}</div>
<div> intercept(req, next: HttpHandler) {</div>
<div> let hadBaseurl = Boolean(req.headers.get('hadBaseurl')) || false;</div>
<div> let newReq = req.clone({</div>
<div> url: hadBaseurl ? `${req.url}` : `${baseurl}${req.url}`,</div>
<div> });</div>
<div> let Cookie = Cookies.get('manageAuthorizationData');</div>
<div> if (!req.cancelToken) {</div>
<div> newReq.headers =</div>
<div> newReq.headers.set('Authorization', 'Bearer '+Cookie);</div>
<div> }</div>
<div> return next.handle(newReq)</div>
<div> .pipe(</div>
<div> retry(2),</div>
<div> catchError(this.handleError)</div>
<div> );</div>
<div> }</div>
<div> private handleError(error: HttpErrorResponse) {</div>
<div> if (error.error instanceof ErrorEvent) {</div>
<div> console.error('An error occurred:', error.error.message);</div>
<div> } else {</div>
<div> /*console.log(error);*/</div>
<div> this.erors = error;</div>
<div> if (this.erors.error.Message == '已拒绝为此请求授权。') {</div>
<div> localStorage.setItem('quan', 'true');</div>
<div> window.location.href = '#/Login';</div>
<div> }</div>
<div> console.error(</div>
<div> `Backend returned code ${error.status}, ` +</div>
<div> `body was: ${error.error}`);</div>
<div> }</div>
<div> // return an observable with a user-facing error message</div>
<div> return throwError(</div>
<div> 'Something bad happened; please try again later.');</div>
<div> };</div>
<div>}</div>
<div>3，index.ts中引入base-interceptor.ts；</div>
<div>
<div>
<div>import { HTTP_INTERCEPTORS } from '@angular/common/http';</div>
<br>
<div>import { BaseInterceptor } from './base-interceptor';</div>
<br>
<div>/** Http interceptor providers in outside-in order */</div>
<div>export const httpInterceptorProviders = [</div>
<div> { provide: HTTP_INTERCEPTORS, useClass: BaseInterceptor, multi: true },</div>
<br>
<div>];</div>
</div>
</div>
</div>
</div>
<p>2，在app.module.ts引入，都可以用了；</p>
<p><img src="https://img2020.cnblogs.com/blog/1159910/202004/1159910-20200429143501415-114769792.png"></p>
<p> </p>
<p><img src="https://img2020.cnblogs.com/blog/1159910/202004/1159910-20200429143534990-204950889.png"></p>
<p> </p><br><br>
来源：https://www.cnblogs.com/xianc/p/12802091.html
頁:
[1]