♻️ mis a jour des guard et optimization de code

Author: mckenziearts

src/app/app.module.ts

@@ -13,7 +13,6 @@ import { environment } from '../environments/environment';
 import { AppRoutingModule } from './core/routes/app-routing.module';
 import { AppComponent } from './core/components/app/app.component';
 import { ROOT_REDUCERS } from './core/store/app.store';
-import { ROOT_EFFECTS } from './core/store/app.effects';
 import { Router } from '@angular/router';
 
 @NgModule({
@@ -24,7 +23,7 @@ import { Router } from '@angular/router';
     AppRoutingModule,
     BrowserAnimationsModule,
     BrowserModule,
-    EffectsModule.forRoot(ROOT_EFFECTS),
+    EffectsModule.forRoot(),
     FormsModule,
     HttpClientModule,
     ReactiveFormsModule,

src/app/core/guards/admin.guard.ts

@@ -1,19 +1,36 @@
 import { Injectable } from '@angular/core';
 import { CanActivate } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { first, map, Observable } from 'rxjs';
+
+import { getCurrentUserAction } from '@app/modules/authentication/store/auth.actions';
+import { selectCurrentUser } from '@app/modules/authentication/store/auth.selectors';
+import { User } from '@app/modules/user/interfaces/user.interface';
 
 @Injectable({
   providedIn: 'root'
 })
 export class AdminGuard implements CanActivate {
 
+  constructor(private store: Store) {}
+
   emails: string[] = [
     '[email protected]',
     '[email protected]',
     '[email protected]',
   ];
 
-  canActivate(): boolean {
-    return true;
+  canActivate(): Observable<boolean> {
+    return this.store.select(selectCurrentUser).pipe(
+      first(),
+      map((user: User | null) => {
+        if (!user) {
+          this.store.dispatch(getCurrentUserAction());
+          return false;
+        }
+        return this.emails.includes(user.email);
+      })
+    );
   }
 
 }

src/app/core/guards/auth.guard.ts

@@ -1,16 +1,27 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, CanActivateChild, RouterStateSnapshot } from '@angular/router';
+import { CanActivateChild, Router } from '@angular/router';
+import { selectIsLoggedIn } from '@app/modules/authentication/store/auth.selectors';
+import { Store } from '@ngrx/store';
+import { filter, first, map, Observable } from 'rxjs';
 
 @Injectable({
   providedIn: 'root'
 })
 export class AuthGuard implements CanActivateChild {
+  constructor(private store: Store, private router: Router) {}
 
-  canActivateChild(
-    childRoute: ActivatedRouteSnapshot, 
-    state: RouterStateSnapshot
-  ): boolean {
-    return true;
+  canActivateChild(): Observable<boolean> {
+    return this.store.select(selectIsLoggedIn).pipe(
+      first((value) => value !== null),
+      map((isLoggedIn: boolean | null) => {
+        if (! isLoggedIn) {
+          this.router.navigateByUrl('/auth/login')
+          return false;
+        }
+
+        return true;
+      })
+    );
   }
 
 }

src/app/core/guards/guest.guard.ts

@@ -1,16 +1,27 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, CanActivateChild, RouterStateSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot, CanActivateChild, Router, RouterStateSnapshot } from '@angular/router';
+import { selectIsLoggedIn } from '@app/modules/authentication/store/auth.selectors';
+import { Store } from '@ngrx/store';
+import { filter, first, map, Observable } from 'rxjs';
 
 @Injectable({
   providedIn: 'root'
 })
 export class GuestGuard implements CanActivateChild {
+  constructor(private store: Store, private router: Router) {}
 
-  canActivateChild(
-    route: ActivatedRouteSnapshot,
-    state: RouterStateSnapshot
-  ): boolean {
-    return true;
+  canActivateChild(): Observable<boolean> {
+    return this.store.select(selectIsLoggedIn).pipe(
+      first((value) => value !== null),
+      map((isLoggedIn: boolean | null) => {
+        if (isLoggedIn) {
+          this.router.navigateByUrl('/dashboard')
+          return false
+        }
+
+        return true;
+      })
+    );
   }
 
 } 

src/app/core/store/app.effects.ts

@@ -1,10 +1,14 @@
+import { AuthState } from '@app/modules/authentication/interfaces/state.interface';
+import { authFeatureKey, authReducer } from '@app/modules/authentication/store/auth.reducer';
 import { routerReducer, RouterState } from '@ngrx/router-store';
 import { Action, ActionReducerMap } from '@ngrx/store';
 
 export interface AppState {
   router: RouterState;
+  [authFeatureKey]: AuthState;
 }
 
 export const ROOT_REDUCERS: ActionReducerMap<AppState, Action> = {
   router: routerReducer,
+  [authFeatureKey]: authReducer,
 };