Angular 2 http post重新加載頁面，註銷不會刪除會話cookie

Question

我有一個具有註銷功能的Angular 2服務。當從應用程序組件調用該函數時，會導致整個頁面刷新。當使用角度1項目時，我沒有經歷過這種行爲。如果我用postman調用我的註銷端點，會話cookie將被刪除。如果我使用我的角度2認證服務，它不會被刪除。

服務

import {Injectable} from 'angular2/core'; 
import {User} from './user'; 
import {Headers, RequestOptions, Http, Response} from 'angular2/http'; 
import {Observable} from 'rxjs/Observable'; 
import {Cookie} from '../extensions/cookies'; 

@Injectable() 
export class AuthenticationService { 

    constructor (private http: Http) {} 

    private _prepTestHost = 'http://localhost:8000/'; 
    private _prepTestLoginUrl = this._prepTestHost + 'login/'; 
    private _prepTestLogoutUrl = this._prepTestHost + 'logout/'; 

    private _authenticated: boolean; 

    getUser() {} 

    isAuthenticated() { 
     return this._authenticated; 
    } 

    setAuthenticated() { 
     this._authenticated = true; 
    } 

    loginUser(username, password) : Observable<User> { 
     let body = JSON.stringify({username, password}); 
     let headers = new Headers({ 'Content-Type': 'application/json' }); 
     let options = new RequestOptions({ headers: headers }); 

     return this.http.post(this._prepTestLoginUrl, body, options) 
           .map(res => <User> res.json(), this.setAuthenticated()) 
           .catch(this.handleError) 
    } 

    logoutUser() : Observable<void> { 
     let body = JSON.stringify({}); 
     let csrfcookie = Cookie.getCookie('csrftoken'); 
     let headers = new Headers({ 
      'X-CSRFToken': csrfcookie, 
      'Content-Type': 'application/json' 
     }); 
     let options = new RequestOptions({ headers: headers}); 
     return this.http.post(this._prepTestLogoutUrl, body, options) 
         .map(res => <void> res.json()) 
         .catch(this.handleError); 

    } 

    private handleError (error: Response) { 
     // in a real world app, we may send the server to some remote  logging infrastructure 
     // instead of just logging it to the console 
     console.error(error); 
     return Observable.throw(error.json().error || 'Server error'); 
    } 
} 

應用組件

import {Component} from 'angular2/core'; 
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router'; 

import {WelcomeCenterComponent} from './welcome-center/welcome-center.component'; 
import {AuthenticationService} from './authentication/authentication.service'; 
import {LoginModalComponent} from './authentication/login-modal.component'; 
import {BrowserXhr, HTTP_PROVIDERS} from "angular2/http"; 
import {CORSBrowserXHR} from './extensions/corsbrowserxhr'; 
import {provide} from "angular2/core"; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <nav class="navbar navbar-default"> 
     <div class="container-fluid"> 
     <div class="navbar-header"> 
      <a class="navbar-brand" href="#" [routerLink]="['WelcomeCenter']">Brand</a> 
     </div> 
     <ul class="nav navbar-nav navbar-right"> 
      <li *ngIf="!authenticated()"> 
      <a href="#" data-toggle="modal" data-target="#myModal">Login</a> 
      </li> 
      <li *ngIf="authenticated()"> 
      <a href="#" data-dismiss="modal" (click)="logout()">Logout</a> 
      </li> 
     </ul> 
     </div> 
    </nav> 
    <router-outlet></router-outlet> 
    <login-modal></login-modal> 
    `, 
    directives: [ROUTER_DIRECTIVES, LoginModalComponent], 
    providers: [HTTP_PROVIDERS, 
     provide(BrowserXhr, {useClass: CORSBrowserXHR}), 
     AuthenticationService] 
}) 
@RouteConfig([ 
    { 
     path: '/welcome-center/...', 
     name: 'WelcomeCenter', 
     component: WelcomeCenterComponent, 
     useAsDefault: true 
    } 
]) 
export class AppComponent { 

    constructor(private _authenticationService: AuthenticationService) {} 

    authenticated() { 
     return this._authenticationService.isAuthenticated(); 
    } 

    logout() { 
     console.log("Logout button pressed"); 
     this._authenticationService.logoutUser().subscribe(); 
    } 
} 

設置withCredentials屬性：

import {BrowserXhr, HTTP_PROVIDERS} from "angular2/http"; 
import {Injectable, provide} from "angular2/core"; 

@Injectable() 
export class CORSBrowserXHR extends BrowserXhr{ 
    build(): any{ 
     var xhr:any = super.build(); 
     xhr.withCredentials = true; 
     return xhr; 
    } 
} 

Answer 1

我認爲頁面重新加載是因爲您在佈局按鈕上禁用事件傳播（您是'a''具有'href'屬性的HTML元素'）時不會阻止事件傳播。您可以在註銷功能結束時使用'return false'或'$ event.stopPropagation（）'。

詳情請參見問題：關於cookie的問題

• Stop event propagation in Angular 2

，我這些你使用跨域請求（CORS）。我認爲你應該嘗試在底層的XHR對象上設置爲'withCredentials'屬性。看到這個問題的更多細節：

• Set-cookie in response not set for Angular2 post request

Answer 2

你可以做些什麼樣的哈克，但我想不出的另一種方式。

Cookie.setCookie(nameOfCookie, "", -1); 

這會在註銷時有效地刪除cookie。我很想知道是否有更好的方法！

我也不確定爲什麼你會得到任何類型的頁面重新加載，我還沒有體驗到我所做的任何事情，希望別人會知道。