实现拦截器

编程入门 行业动态 更新时间:2024-10-03 17:17:08

实现<a href=https://www.elefans.com/category/jswz/34/1770738.html style=拦截器"/>

实现拦截器

我有拦截器的问题,现在我正在学习 JWT 到达处理拦截器的步骤,我无法知道问题的根源,拦截器正在阻止要使用的登录 API 并生成令牌将被注入到拦截器的请求头中;这里是拦截器类的代码:

import { catchError } from 'rxjs/operators';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpErrorResponse } from "@angular/common/http";
import { Injectable } from '@angular/core';
import { tap } from 'rxjs/operators';
import { Router } from "@angular/router";
import { Observable, throwError } from 'rxjs';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

constructor(){}

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>{
      console.log("you are in interceptor");
      // get the token from the local storage
      const token = localStorage.getItem('token');
      if(token){
        console.log("token stored to the local store: "+token);
        // modify the request header
        req = req.clone({
          setHeaders: {Authorization: `${token}`}
        });
        // handling errors
        return next.handle(req).pipe(catchError(err=>{
          console.log("something wrong in interceptor");
          if(err instanceof HttpErrorResponse){
             console.log(err.status + ': token expired, login again');
          }
          return throwError(()=> new Error('Some Unknown Error'));
        }));
      }
      else console.log("token not provided");
}
}

如果你想要使用 Node.js 和角度的完整代码,这里是角度上的链接: .

我尝试实现拦截器来理解 JWT 令牌,但代码没有按预期执行,拦截器阻止了登录 API。

回答如下:

您的

else
区块需要使用
return next.handle(request);
传递请求。所以它应该看起来更像这样:

import { catchError } from "rxjs/operators";
import {
  HttpInterceptor,
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpErrorResponse,
} from "@angular/common/http";
import { Injectable } from "@angular/core";
import { tap } from "rxjs/operators";
import { Router } from "@angular/router";
import { Observable, throwError } from "rxjs";

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  constructor() {}

  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    console.log("you are in interceptor");
    // get the token from the local storage
    const token = localStorage.getItem("token");
    if (token) {
      console.log("token stored to the local store: " + token);
      // modify the request header
      req = req.clone({
        setHeaders: { Authorization: `${token}` },
      });
      // handling errors
      return next.handle(req).pipe(
        catchError((err) => {
          console.log("something wrong in interceptor");
          if (err instanceof HttpErrorResponse) {
            console.log(err.status + ": token expired, login again");
          }
          return throwError(() => new Error("Some Unknown Error"));
        })
      );
    } else {
      console.log("token not provided");
      return next.handle(request);
    }
  }
}

更多推荐

实现拦截器

本文发布于:2024-05-31 04:37:52,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1771281.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:拦截器

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!