来自页面 META 标记的 Angular 13 CSRF 令牌答案

【问题标题】：Angular 13 CSRF Token from page META tag来自页面 META 标记的 Angular 13 CSRF 令牌
【发布时间】：2022-01-13 22:16:26
【问题描述】：

我有 Angular 13 应用程序和使用 ruby on rails 的后端。根据 Angular 文档https://angular.io/api/common/http/HttpClientXsrfModule#description，我应该能够简单地使用 HttpClientXsrfModule 进行 XSRF 保护。它有 cookieName 和 headerName 的可选设置。问题是在我的情况下没有 CSRF cookie，令牌存储在页眉 META 标记中。这就是为什么我认为不可能像文档所说的那样使用 HttpClientXsrfModule。

相反，我将实现一个自定义拦截器，但是我不知道如何在 Angular 自定义拦截器中获取 META 标记值。 https://angular.io/guide/http#intercepting-requests-and-responses

请告知如何在 Angular 拦截器中获取页眉 META 标记值：

import { Injectable } from '@angular/core';
import {
  HttpEvent, HttpInterceptor, HttpHandler, HttpRequest
} from '@angular/common/http';

import { Observable } from 'rxjs';

@Injectable()
export class NoopInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler):
    Observable<HttpEvent<any>> {
    req = req.clone({
            setHeaders: { 'X-CSRF-TOKEN': ...how to get it... }
        });
    return next.handle(req);
  }
}

【问题讨论】：

标签： ruby-on-rails angular interceptor angular12 angular13

【解决方案1】：

Angular 提供了Meta 服务，使用它我们可以检索元元素。

import { Meta } from '@angular/platform-browser';
import { Injectable } from '@angular/core';
import {
  HttpEvent, HttpInterceptor, HttpHandler, HttpRequest
} from '@angular/common/http';

import { Observable } from 'rxjs';

@Injectable()
export class NoopInterceptor implements HttpInterceptor {
  constructor(private meta:Meta){
    console.log(this.meta.getTag('name="csrf-token"').content);
  }
  intercept(req: HttpRequest<any>, next: HttpHandler):
    Observable<HttpEvent<any>> {
    req = req.clone({
            setHeaders: { 'X-CSRF-TOKEN': this.meta.getTag('name="csrf-token"').content }
        });
    return next.handle(req);
  }
}

【讨论】：