Угловая 2 страница после перезагрузки http, logout не удаляет сеанс cookie

Question

У меня есть функция Angular 2, которая имеет функцию выхода из системы. Когда функция вызывается из компонента приложения, она вызывает обновление полной страницы. При использовании угловых 1 проектов я не испытывал такого поведения. Если я вызову конечную точку выхода с почтовым ящиком, файл 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'); 
    } 
} 

App Компонент

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

Я думаю, что перезагрузка страницы связана с тем, что вы не предотвращаете распространение событий при блокировке кнопки макета (вы являетесь элементом HTML с атрибутом «href»). Вы можете использовать «return false» в конце вашей функции выхода или «$ event.stopPropagation()».

Смотрите вопрос для более подробной информации:

• Stop event propagation in Angular 2

относительно проблемы печенья, я это использовать перекрестные запросы домена (CORS). Я думаю, что вы должны попытаться установить true атрибут 'withCredentials' на базовом объекте XHR. Смотрите этот вопрос для более подробной информации:

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

Answer 2

Вы могли бы сделать что-то вроде Hacky, но я не могу думать иначе.

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

Это эффективно удалит файл cookie при выходе из системы. Мне бы хотелось узнать, есть ли лучший способ!

Я также не уверен, почему вы вообще загружаете какую-либо перезагрузку страницы, но мне еще предстоит испытать это на все, что я сделал, надеюсь, кто-то еще узнает.