I'm using Angular 6 and having a hard time integrating Django's csrf with Angular's. I found in this thread that Django changes the token on login which, since I can both register and login using post requests with the same new session but not post anything after login seems to make sense.
The question becomes how I go about resetting the csrf token on login. The way the csrf is handled now in my Angular app is shown in the below code for my app module:
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 { }
So my question is, how do I get my app to reset the value on login? (Not necessarily specifically login, but how do I get that value to reset.)
Great question, this is a little tricky and my response is very much untested. However, since there was no single post/article I could find, I decided to put down what I make of this problem after reading multiple sources:
Angular's HttpClient has built-in support for the client-side half of this technique. Read about it more in the HttpClient guide.
You can set the key names as follows in Angular 1 :
`$httpProvider.defaults.xsrfCookieName = 'csrftoken';`
`$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';`
The same can be achieved in Angular 2 and above as follows:
bootstrap(AngularApp, [
HTTP_PROVIDERS,
provide(XSRFStrategy, {useValue: new CookieXSRFStrategy('csrftoken', 'X-CSRFToken')})
]);
Since the angular app isn't served by django, in order to let the cookie to be set, angular app needs to do a GET request to django first.
This approach only works if you have CSRF_USE_SESSIONS
set to False
, meaning Django sets the CSRF Token value as part of the cookie
Related reading:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.