HTTP 拦截器在 Angular 17 项目中不起作用

Question

我的 AuthInterceptor.intercept 方法没有被调用。将所有必要的代码放在下面。我的代码流程：login.component 中的 FormSubmit() 方法调用 login.service() 中的generateToken() 方法，该方法向服务器发出 http.post 请求。问题：Inerceptor 没有在任何 http 方法之前执行。谢谢

app.config.ts

import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideAnimations } from '@angular/platform-browser/animations';
import { HttpClient, HttpClientModule, provideHttpClient, withInterceptors, withInterceptorsFromDi } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes), provideAnimations(),provideHttpClient(withInterceptorsFromDi()),]
};

登录.组件.ts

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatFormFieldModule} from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import {MatSnackBar, MatSnackBarModule} from '@angular/material/snack-bar';
import { MatCardModule } from '@angular/material/card';
import { LoginService } from '../../services/login.service';
import { UserService } from '../../services/user.service';
import { TempService } from '../../services/temp.service';


@Component({
  selector: 'app-login',
  standalone: true,
  imports: [MatInputModule, MatFormFieldModule, MatButtonModule, FormsModule,MatSnackBarModule,MatCardModule],
  providers:[MatSnackBar,LoginService,UserService,TempService],
  templateUrl: './login.component.html',
  styleUrl: './login.component.css'
})
export class LoginComponent {

  loginData={
    username:"",
    password:""
  };

  constructor(private snack:MatSnackBar, private login:LoginService,private temp:TempService){}

  formSubmit(){
    console.log('login button clicked '+this.loginData.username+', '+this.loginData.password);
    if(this.loginData.username.trim() == '' || this.loginData.username == null){
      this.snack.open("Username cannot be null!","ok",{
        duration:3000,
      });
      return;
    }

    if(this.loginData.password.trim() == '' || this.loginData.password == null){
      this.snack.open("Password field cannot be null!","ok",{
        duration:3000,
      });
      return;
    }

    // request server to generate token
    this.login.generateToken(this.loginData)
    .subscribe({
      next:(data:any)=>{
        console.log('success');
        console.log(data);

        //token has been successfully created
        this.login.loginUser(data.token);
        this.login.getCurrentUser().subscribe({
          next:(user:any)=>{
            this.login.setUser(user);
            console.log(user);
            //redirect... ADMIN : admin dashboard
            //redirect... NORMAL : normal dashboard
          }
        })
      },
      error:(error:any)=>{
        console.log("Error "+ error);
      }
    });

  }
}

登录.service.ts

import { Injectable, NgModule } from '@angular/core';
import baseUrl from './helper';
import { HttpBackend, HttpClient } from '@angular/common/http';
import { authInterceptorProviders } from './auth.interceptor';



@NgModule({
  providers: [authInterceptorProviders],
})

@Injectable({
  providedIn: 'root'
})
export class LoginService {
  // private http: HttpClient;
  // constructor(httpBackend:HttpBackend) {
  //   this.http = new HttpClient(httpBackend);
  //  }
  constructor(private http:HttpClient) {

  }

  //get current user
  public getCurrentUser(){
    return this.http.get(`${baseUrl}/current-user`);
  }

  //generate token

  public generateToken(loginData: any) {
    console.log("genrate Token start");
    return this.http.post(`${baseUrl}/generate-token`, loginData);

  }

  //login user: set token in local storage
  public loginUser(token: string) {
    localStorage.setItem("token_exam_portal", token);
    return true;
  }

  //isLogin: whether user is logged in or not
  public isLoggedIn() {
    let tokenStr = localStorage.getItem("token_exam_portal");
    if (tokenStr == undefined || tokenStr == '' || tokenStr == null) {
      return false;
    }
    return true;
  }

  //logout: remove token_exam_portal from the local storage
  public logout() {
    localStorage.removeItem("token_exam_portal");
    localStorage.removeItem("user");
    return true;
  }

  //get token
  public getToken() {
    return localStorage.getItem("token_exam_portal");
  }

  //set user deatails
  public setUser(user: any) {
    localStorage.setItem('user', JSON.stringify(user));
  }

  //get user
  public getUser() {
    let userStr = localStorage.getItem("user");
    if (userStr != null) {
      return JSON.parse(userStr);
    }
    else {
      this.logout();
      return null;
    }
  }
  // get user role
  public getUserRole(){
    let user = this.getUser();
    return user.authorities[0].authority;// returns only first role
  }
}

auth.interceptor.ts

import { HTTP_INTERCEPTORS, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from "@angular/common/http";
import { Component, Injectable, NgModule } from "@angular/core";
import { Observable } from "rxjs";
import { LoginService } from "./login.service";

const TOKEN_HEADER = 'Authorization';

@NgModule({
    providers: [LoginService,Injectable],
})

// @Injectable()
export class AuthInterceptor implements HttpInterceptor {

    constructor(private login: LoginService) { }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        //add the jwt token
        console.log("Executing intercept method");
        
        let authReq = req;
        const token = this.login.getToken();
        if (token != null) {
            //if token exists then add the token as header to the http request
            authReq = authReq.clone({ setHeaders: { Authorization: `Bearer ${token}` } });
        }
        return next.handle(authReq);
    }
}

export const authInterceptorProviders = (
    {
        provide:HTTP_INTERCEPTORS,
        useClass:AuthInterceptor,
        multi: true,
    }
);

我是角度新手，无法解决这个基本问题。我在互联网上进行了搜索，但找不到任何合适的解决方案。请建议。谢谢。

Answer 1

您可以从

authInterceptorProviders

 中删除 

auth.interceptor.ts

然后从

LoginService

和

@ngModule

代码中删除提供者数组。

最后在

app.config.ts

中你需要添加拦截器，如

import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideAnimations } from '@angular/platform-browser/animations';
import { HttpClient, HttpClientModule, provideHttpClient, withInterceptors, withInterceptors } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes), provideAnimations(),provideHttpClient(withInterceptors([AuthInterceptor])),]
};

请同时导入身份验证拦截器，因为我不知道确切的路径！