fix: lifecycle fix for auth directives (#379)

bluehalo · May 13, 2024 · 4b2eb65 · 4b2eb65
1 parent bd5c01b
commit 4b2eb65
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 57 deletions.
diff --git a/src/app/core/auth/directives/has-every-role.directive.ts b/src/app/core/auth/directives/has-every-role.directive.ts
@@ -1,5 +1,5 @@
 import { NgIf } from '@angular/common';
-import { Directive, effect, inject, input } from '@angular/core';
+import { Directive, Injector, OnInit, effect, inject, input } from '@angular/core';
 
 import { APP_SESSION } from '../../tokens';
 import { Role } from '../role.model';
@@ -14,18 +14,22 @@ import { Role } from '../role.model';
 	],
 	standalone: true
 })
-export class HasEveryRoleDirective {
-	#ngIfDirective = inject(NgIf);
-	#session = inject(APP_SESSION);
+export class HasEveryRoleDirective implements OnInit {
+	readonly #ngIfDirective = inject(NgIf);
+	readonly #injector = inject(Injector);
+	readonly #session = inject(APP_SESSION);
 
-	roles = input.required<Array<string | Role>>({ alias: 'hasEveryRole' });
-	andCondition = input(true, { alias: 'hasEveryRoleAnd' });
-	orCondition = input(false, { alias: 'hasEveryRoleOr' });
+	readonly roles = input.required<Array<string | Role>>({ alias: 'hasEveryRole' });
+	readonly andCondition = input(true, { alias: 'hasEveryRoleAnd' });
+	readonly orCondition = input(false, { alias: 'hasEveryRoleOr' });
 
-	constructor() {
-		effect(() => {
-			this.updateNgIf();
-		});
+	ngOnInit() {
+		effect(
+			() => {
+				this.updateNgIf();
+			},
+			{ injector: this.#injector }
+		);
 	}
 
 	private updateNgIf() {

diff --git a/src/app/core/auth/directives/has-role.directive.ts b/src/app/core/auth/directives/has-role.directive.ts
@@ -1,5 +1,5 @@
 import { NgIf } from '@angular/common';
-import { Directive, effect, inject, input } from '@angular/core';
+import { Directive, Injector, OnInit, effect, inject, input } from '@angular/core';
 
 import { APP_SESSION } from '../../tokens';
 import { Role } from '../role.model';
@@ -14,18 +14,22 @@ import { Role } from '../role.model';
 	],
 	standalone: true
 })
-export class HasRoleDirective {
-	#ngIfDirective = inject(NgIf);
-	#session = inject(APP_SESSION);
+export class HasRoleDirective implements OnInit {
+	readonly #ngIfDirective = inject(NgIf);
+	readonly #injector = inject(Injector);
+	readonly #session = inject(APP_SESSION);
 
-	role = input.required<string | Role>({ alias: 'hasRole' });
-	andCondition = input(true, { alias: 'hasRoleAnd' });
-	orCondition = input(false, { alias: 'hasRoleOr' });
+	readonly role = input.required<string | Role>({ alias: 'hasRole' });
+	readonly andCondition = input(true, { alias: 'hasRoleAnd' });
+	readonly orCondition = input(false, { alias: 'hasRoleOr' });
 
-	constructor() {
-		effect(() => {
-			this.updateNgIf();
-		});
+	ngOnInit() {
+		effect(
+			() => {
+				this.updateNgIf();
+			},
+			{ injector: this.#injector }
+		);
 	}
 
 	private updateNgIf() {

diff --git a/src/app/core/auth/directives/has-some-roles.directive.ts b/src/app/core/auth/directives/has-some-roles.directive.ts
@@ -1,5 +1,5 @@
 import { NgIf } from '@angular/common';
-import { Directive, effect, inject, input } from '@angular/core';
+import { Directive, Injector, OnInit, effect, inject, input } from '@angular/core';
 
 import { APP_SESSION } from '../../tokens';
 import { Role } from '../role.model';
@@ -14,18 +14,22 @@ import { Role } from '../role.model';
 	],
 	standalone: true
 })
-export class HasSomeRolesDirective {
-	#ngIfDirective = inject(NgIf);
-	#session = inject(APP_SESSION);
+export class HasSomeRolesDirective implements OnInit {
+	readonly #ngIfDirective = inject(NgIf);
+	readonly #injector = inject(Injector);
+	readonly #session = inject(APP_SESSION);
 
-	roles = input.required<Array<string | Role>>({ alias: 'hasSomeRoles' });
-	andCondition = input(true, { alias: 'hasSomeRolesAnd' });
-	orCondition = input(false, { alias: 'hasSomeRolesOr' });
+	readonly roles = input.required<Array<string | Role>>({ alias: 'hasSomeRoles' });
+	readonly andCondition = input(true, { alias: 'hasSomeRolesAnd' });
+	readonly orCondition = input(false, { alias: 'hasSomeRolesOr' });
 
-	constructor() {
-		effect(() => {
-			this.updateNgIf();
-		});
+	ngOnInit() {
+		effect(
+			() => {
+				this.updateNgIf();
+			},
+			{ injector: this.#injector }
+		);
 	}
 
 	private updateNgIf() {

diff --git a/src/app/core/auth/directives/is-authenticated.directive.ts b/src/app/core/auth/directives/is-authenticated.directive.ts
@@ -1,5 +1,13 @@
 import { NgIf } from '@angular/common';
-import { Directive, booleanAttribute, effect, inject, input } from '@angular/core';
+import {
+	Directive,
+	Injector,
+	OnInit,
+	booleanAttribute,
+	effect,
+	inject,
+	input
+} from '@angular/core';
 
 import { APP_SESSION } from '../../tokens';
 
@@ -13,19 +21,24 @@ import { APP_SESSION } from '../../tokens';
 	],
 	standalone: true
 })
-export class IsAuthenticatedDirective {
-	#ngIfDirective = inject(NgIf);
-	#session = inject(APP_SESSION);
+export class IsAuthenticatedDirective implements OnInit {
+	readonly #ngIfDirective = inject(NgIf);
+	readonly #injector = inject(Injector);
+	readonly #session = inject(APP_SESSION);
 
-	isAuthenticated = input(true, { transform: booleanAttribute });
-	andCondition = input(true, { alias: 'isAuthenticatedAnd' });
-	orCondition = input(false, { alias: 'isAuthenticatedOr' });
+	readonly isAuthenticated = input(true, { transform: booleanAttribute });
+	readonly andCondition = input(true, { alias: 'isAuthenticatedAnd' });
+	readonly orCondition = input(false, { alias: 'isAuthenticatedOr' });
 
-	constructor() {
-		effect(() => {
-			this.updateNgIf();
-		});
+	ngOnInit() {
+		effect(
+			() => {
+				this.updateNgIf();
+			},
+			{ injector: this.#injector }
+		);
 	}
+
 	private updateNgIf() {
 		this.#ngIfDirective.ngIf =
 			this.orCondition() || (this.andCondition() && this.#session().isAuthenticated());

diff --git a/src/app/core/teams/directives/has-some-team-roles.directive.ts b/src/app/core/teams/directives/has-some-team-roles.directive.ts
@@ -1,5 +1,5 @@
 import { NgIf } from '@angular/common';
-import { Directive, effect, inject, input } from '@angular/core';
+import { Directive, Injector, OnInit, effect, inject, input } from '@angular/core';
 
 import { APP_SESSION } from '../../tokens';
 import { TeamRole } from '../team-role.model';
@@ -15,19 +15,23 @@ import { Team } from '../team.model';
 	],
 	standalone: true
 })
-export class HasSomeTeamRolesDirective {
+export class HasSomeTeamRolesDirective implements OnInit {
 	readonly #ngIfDirective = inject(NgIf);
+	readonly #injector = inject(Injector);
 	readonly #session = inject(APP_SESSION);
 
 	readonly team = input.required<Pick<Team, '_id'>>({ alias: 'hasSomeTeamRoles' });
-	readonly roles = input.required<Array<string | TeamRole>>({ alias: 'hasSomeTeamRolesRole' });
+	readonly roles = input.required<Array<string | TeamRole>>({ alias: 'hasSomeTeamRolesRoles' });
 	readonly andCondition = input(true, { alias: 'hasSomeTeamRolesAnd' });
 	readonly orCondition = input(false, { alias: 'hasSomeTeamRolesOr' });
 
-	constructor() {
-		effect(() => {
-			this.updateNgIf();
-		});
+	ngOnInit() {
+		effect(
+			() => {
+				this.updateNgIf();
+			},
+			{ injector: this.#injector }
+		);
 	}
 
 	protected checkPermission(): boolean {

diff --git a/src/app/core/teams/directives/has-team-role.directive.ts b/src/app/core/teams/directives/has-team-role.directive.ts
@@ -1,5 +1,5 @@
 import { NgIf } from '@angular/common';
-import { Directive, effect, inject, input } from '@angular/core';
+import { Directive, Injector, OnInit, effect, inject, input } from '@angular/core';
 
 import { APP_SESSION } from '../../tokens';
 import { TeamRole } from '../team-role.model';
@@ -15,19 +15,23 @@ import { Team } from '../team.model';
 	],
 	standalone: true
 })
-export class HasTeamRoleDirective {
+export class HasTeamRoleDirective implements OnInit {
 	readonly #ngIfDirective = inject(NgIf);
+	readonly #injector = inject(Injector);
 	readonly #session = inject(APP_SESSION);
 
 	readonly team = input.required<Pick<Team, '_id'>>({ alias: 'hasTeamRole' });
 	readonly role = input.required<string | TeamRole>({ alias: 'hasTeamRoleRole' });
 	readonly andCondition = input(true, { alias: 'hasTeamRoleAnd' });
 	readonly orCondition = input(false, { alias: 'hasTeamRoleOr' });
 
-	constructor() {
-		effect(() => {
-			this.updateNgIf();
-		});
+	ngOnInit() {
+		effect(
+			() => {
+				this.updateNgIf();
+			},
+			{ injector: this.#injector }
+		);
 	}
 
 	protected checkPermission(): boolean {