web-dev-qa-db-ja.com

Angular 4でウィンドウを閉じるときにログアウトする

Angular 4 applicatonがあり、ユーザーがページ（ブラウザのウィンドウまたはタブ）を閉じたときにログアウト関数を呼び出します。

これは私のログアウト機能です：

    let currentUser: User = JSON.parse(localStorage.getItem('currentUser'));

    let headers = new Headers({ 'Authorization': 'Basic ' +  btoa(currentUser.login + ":" + currentUser.password),
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Headers': 'access-control-allow-headers, access-control-allow-Origin, content-type, authorization'
    });

    let opts = new RequestOptions();
    opts.headers = headers;


   return this.http.get(this.route + 'UserLogout', opts).map((response: Response) => response.json());
}

そして、私のapp.component.tsには、

@HostListener('window:beforeunload', ['$event'])
beforeUnloadHander(event) {
    this.authenticationService.logoutOnClose().subscribe(res=> {
        localStorage.removeItem('currentUser');
    });

}

しかし、ウィンドウは閉じており、要求は決して行われません。リクエストを同期的に行う必要があると思いますが、方法がわかりません。

アイデアはありますか？

[〜＃〜] edit [〜＃〜] jQueryで試しました：

 ngOnDestroy(){
    let currentUser: User = JSON.parse(localStorage.getItem('currentUser'));
    $.ajax({ url: 'myURL',
        beforeSend: function(request) {
            request.setRequestHeader("Authority", 'Basic ' +  btoa(currentUser.login + ":" + currentUser.password));
            request.setRequestHeader('Content-Type', 'application/json');
            request.setRequestHeader('Access-Control-Allow-Origin', '*');
            request.setRequestHeader('Access-Control-Allow-Headers', 'access-control-allow-headers, access-control-allow-Origin, content-type, authorization');
        },
        type: 'GET',
        success: function (result) {
        alert('test');
        localStorage.removeItem('currentUser');
    }, async: false });
}
angularhttpsynchronous
6
Adrien

私はそれを行う方法を見つけました。したがって、私はAngularを使用したjQueryを避けたいと思いますが、Sriram Jayaramanのように、問題を解決するために他に何も見つかりませんでした。しかし、関数@HostListener('window:beforeunload')および@HostListener('window:onunload')が機能していません。

そのため、私のapp.component.tsのngOnInitで、beforeunloadのイベントリスナーをウィンドウに追加し、ユーザーが接続されている場合は、ajax呼び出しを行う関数を呼び出します。

これは私のコードです：

ngOnInit() {
    let context = this;
    window.addEventListener("beforeunload", function (e) {
        let currentUser : User = JSON.parse(localStorage.getItem('currentUser'));
        if(currentUser){
            context.logoutOnClose();
        }
    });
}

logoutOnClose(){
    let currentUser: User = JSON.parse(localStorage.getItem('currentUser'));
    $.ajax({ url: 'myURL',
    beforeSend: function(request) {
        request.setRequestHeader("Authorization", 'Basic ' +  btoa(currentUser.login + ":" + currentUser.password));
        request.setRequestHeader('Content-Type', 'application/json');
        request.setRequestHeader('Access-Control-Allow-Origin', '*');
        request.setRequestHeader('Access-Control-Allow-Headers', 'access-control-allow-headers, access-control-allow-Origin, content-type, authorization');
    },
    type: 'GET',
        success: function (result) {
        localStorage.removeItem('currentUser');
    },
    async: false });
}
8
Adrien

ユーザーと認証情報は、sessionStorageではなくlocalStorageに保存できます。 sessionStorageはタブ/ブラウザを閉じるたびに削除されますが、localStorageしないでください！

3
Boulboulouboule

離れるときにユーザーを切断する理由はあなた次第です。ただし、それを行う場合は、コードとロジックをフレームワークに適合させる必要があり、その逆ではありません。

つまり、ユーザーが再度ログインしたときにユーザーセッションを書き換えるか、未使用のセッションを削除するジョブを作成する必要があります。

ただし、どちらの方法でも、localStorage/SessionStorageを削除するだけで済みます。これを行うと、これはユーザーに透過的になります。サーバーでそれを管理する方法が変わるだけです（ただし、ユーザーにはわかりません）。

0
user4676340

app.component.tsのOnDestroy関数に実行する必要があるコードを追加できます

export class AppComponent implements OnDestroy {
    ngOnDestroy(): void {
        this.authenticationService.logoutOnClose().subscribe(res=> {
            localStorage.removeItem('currentUser');
    });
}

ただし、これが非同期呼び出しをどのように処理するかはわかりませんが、試してみる価値はあります。

0
Venomy