Angular重置csrf令牌

时间：2018-05-25 16:34:26

标签： django angular post csrf

我使用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 { }

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

1 个答案:

答案 0 :(得分：2)

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

  • Django和Angular默认情况下理解 CSRF;因此，当您发出POST请求时，不需要手动设置 显式CSRF标头值。
  • 这与jQuery不同，你必须从cookie中查找 CSRFToken然后设置标题中的值，而不是键“X-CSRFToken”
  • 但是，由于Angular不知道密钥的名称，从cookie获取CSRF令牌的密钥的名称，以及要在Header中设置的密钥的名称，您需要 configure < / strong> 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不提供角度app，为了让   要设置的cookie，角度应用程序需要对django执行GET请求   第一

CSRF_USE_SESSIONS如果False设置为Unknown，则表示Django将CSRF令牌值设置为Cookie的一部分

相关阅读：

相关问题
最新问题