Angular重置csrf令牌

问题描述 投票：0回答：1

我正在使用Angular 6并且很难将Django的csrf与Angular集成。我发现in this thread Django在登录时更改了令牌，因为我可以使用相同的新会话使用发布请求进行注册和登录，但在登录后不发布任何内容似乎有意义。

问题变成我如何在登录时重置csrf令牌。现在在我的Angular应用程序中处理csrf的方式显示在我的app模块的下面代码中：

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { HttpModule, XSRFStrategy, CookieXSRFStrategy } from '@angular/http'

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { RegisterComponent } from './register/register.component';
import { LoginComponent } from './login/login.component';
import { AlertComponent } from './_directives/alert.component';
import { ProfileComponent } from './profile/profile.component';
import { AuthGuardService } from './_guards/auth-guard.service';
import { AlertService } from './_services/alert.service';
import { AuthService } from './_services/auth.service';
import { UserService } from './_services/User.service';

@NgModule({
  declarations: [
    AppComponent,
    RegisterComponent,
    LoginComponent,
    AlertComponent,
    ProfileComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    AppRoutingModule,
    HttpClientModule,
    HttpModule
  ],
  providers: [
    {
      provide: XSRFStrategy,
      useValue: new CookieXSRFStrategy('csrftoken', 'X-CSRFToken')
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

所以我的问题是，如何让我的应用程序重置登录时的值？ （不一定是专门登录，但如何重置该值。）

django angular post csrf
1个回答
2
投票

很棒的问题，这有点棘手，我的反应非常不经过考验。但是，由于我找不到单个帖子/文章，我决定在阅读多个来源后放下我对此问题的看法：

  • Django和Angular都默认理解CSRF;因此，在发出POST请求时，无需手动设置显式CSRF标头值。
  • 这与jQuery不同，你必须从cookie中找到CSRFToken，然后根据键“X-CSRFToken”在头文件中设置它。
  • 但是，由于Angular不知道密钥的名称，从cookie获取CSRF令牌的密钥的名称，以及要在Header中设置的密钥的名称，因此需要在Angular中配置密钥名称。
  • 再一次：你只是在这里设置键名而不是值，因为＃1，Angular会自动执行此操作。 Angular的HttpClient内置支持该技术的客户端一半。在HttpClient指南中阅读更多内容。

您可以在Angular 1中按如下方式设置键名：

`$httpProvider.defaults.xsrfCookieName = 'csrftoken';`
`$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';`

在Angular 2及以上可以实现同样的目的如下：

bootstrap(AngularApp, [
      HTTP_PROVIDERS,
      provide(XSRFStrategy, {useValue: new CookieXSRFStrategy('csrftoken', 'X-CSRFToken')})
    ]);
  • 是的，您是正确的，在登录时，CSRFToken的值会更改，您需要再次获取它，然后才能发出另一个POST请求。此外，您的解决方案也在于，在登录后，对同一个Django服务器执行简单的GET请求，并确保它返回的cookie包含newly updated csrftoken。这与第一次如何向Django BE API发出POST请求的原理相同，简单，事先发出GET请求

由于角度应用程序不是由django提供的，为了让cookie设置，角度应用程序需要首先对django执行GET请求。

这个approach only works如果你有CSRF_USE_SESSIONS设置为False，意味着Django将CSRF令牌值设置为cookie的一部分

相关阅读：

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.