我的拦截器没有启动.我不知道我做错了什么.我试过了所有能找到的解决办法.

拦截器只是没有拦截http请求.所以没有添加"Authorization"标头.

token.interseptor.ts(try OnInit查看是否触发了控制台日志(log))

import { Injectable, OnInit } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import { Observable } from 'rxjs';
import { AuthService } from '../services/auth.service';

@Injectable({
  providedIn: 'root'
})

export class TokenInterceptor implements HttpInterceptor, OnInit {

  constructor(private AuthService: AuthService) {
  }
  ngOnInit(): void {
    console.log('Working? ');

  }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    console.log('request- ', request);
    const tokenizedReq = request.clone({
      setHeaders: { Authorization: `Bearer ${this.AuthService.getToken()}` }
    });

    return next.handle(tokenizedReq);
  }

app.module.ts:

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { TokenInterceptor } from './utility/token.interceptor';

 providers: [ 
    { provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true }
  ],

如下所示发送HTTP API调用:

  const userPackage = {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(user)
  }

  const respose = await fetch('http://localhost:3000/api/user/login', userPackage)
  const loggedIn = await respose.json();

推荐答案

  • please use <编码>HttpClient to make API calls, this is angular default service for making API calls. <编码>fetch APIs do not go through interceptor, but httpClient APIs do go through it!

编码

<编码>import {HttpClient} from '@angular/common/http';

constructor(private httpClient: HttpClient) {}
...
callFunc() {
    const respose = await 
    this.httpClient.get('http://localhost:3000/api/user/login', userPackage)
    return response;
}

reference stackblitz for http client not by me

  • NgOnInit does not work on services, instead use <编码>constructor to call any 编码 you might want to use!

Angular相关问答推荐

Angular material 输入字段中的图标未显示

Angular 16未知参数:独立

尾风手风琴中的Ngor

我如何更新此Ionic应用程序以解决路由问题?

PrimeNg选项卡视图选项卡

从canActivate创建时,Angular material 对话框不接收MAT_DIALOG_DATA

ION标签-从子对象中加载页,保留父对象的S内容

阶段JS画布覆盖 bootstrap 模式

找不到模块webpack dev服务器

怎样在 Angular 2 或 4 中将输入字段设为只读?

更改 Select 选项时获取当前值

Angular 5 Mat-grid 列表响应式

使用 Angular2 将文件上传到 REST API

Angular2:如果 img src 无效,则显示占位符图像

Angular 2 应用程序中没有Access-Control-Allow-Origin标头

Angular 5 中 value 和 ngValue 的区别

Angular 2:将外部js文件导入组件

缺少带有Angular的语言环境XXX的语言环境数据

此类通过 SomeModule -> SomeComponent 对消费者可见,但不会从顶级库入口点导出

Angular2:将数组转换为 Observable