Skip to content

Instantly share code, notes, and snippets.

@KrashLeviathan
Created June 12, 2019 13:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save KrashLeviathan/5a7dfa9d22b117ce5d665371c6386759 to your computer and use it in GitHub Desktop.
Save KrashLeviathan/5a7dfa9d22b117ce5d665371c6386759 to your computer and use it in GitHub Desktop.
This Angular 7 class and decorator can be used to perform component cleanup actions when a user logs out.
import {OnDestroy, OnInit} from '@angular/core';
import {AuthService} from '../service/auth/auth.service';
import {Subscription} from 'rxjs';
/**
* To use this class and the decorator below (must be used together):
*
* @CleanupAfterLogout()
* @Component({
* selector: '...',
* templateUrl: '...'
* })
* export class MyComponentThatHoldsSensitiveData extends LogoutCleanupComponent {
* ...
* onLogout(): void {
* console.log('Perform my logout actions');
* }
* ...
* }
*/
export abstract class LogoutCleanupComponent implements OnDestroy, OnInit {
// noinspection JSMethodCanBeStatic
private get componentSuperclass() {
return 'LogoutCleanupComponent';
}
private isLoggedInSubscription: Subscription;
protected constructor(private auth: AuthService) {
}
abstract onLogout(): void;
private superOnInit(): void {
this.isLoggedInSubscription = this.auth.isLoggedIn.subscribe(
isLoggedIn => {
if (!isLoggedIn) {
this.onLogout();
this.isLoggedInSubscription.unsubscribe();
}
},
console.error);
}
private superOnDestroy(): void {
// Give the logout page time to trigger logout (if the user is navigating to the logout page)
setTimeout(() => {
this.isLoggedInSubscription.unsubscribe();
}, 250);
}
ngOnInit(): void {
}
ngOnDestroy(): void {
}
}
/**
* To use this decorator and the class above (must be used together):
*
* @CleanupAfterLogout()
* @Component({
* selector: '...',
* templateUrl: '...'
* })
* export class MyComponentThatHoldsSensitiveData extends LogoutCleanupComponent {
* ...
* onLogout(): void {
* console.log('Perform my logout actions');
* }
* ...
* }
*/
export function CleanupAfterLogout(): ClassDecorator {
return (constructor: any) => {
if (constructor.prototype.componentSuperclass !== 'LogoutCleanupComponent') {
throw new Error('CleanupAfterLogout() decorator only applies to classes extending LogoutCleanupComponent!');
}
const originalNgOnInit = constructor.prototype.ngOnInit;
const originalNgOnDestroy = constructor.prototype.ngOnDestroy;
constructor.prototype.ngOnInit = function() {
constructor.prototype.superOnInit.apply(this);
// tslint:disable-next-line:no-unused-expression
originalNgOnInit && typeof originalNgOnInit === 'function' && originalNgOnInit.apply(this);
};
constructor.prototype.ngOnDestroy = function() {
constructor.prototype.superOnDestroy.apply(this);
// tslint:disable-next-line:no-unused-expression
originalNgOnDestroy && typeof originalNgOnDestroy === 'function' && originalNgOnDestroy.apply(this);
};
};
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment