✨ mis en place de la recuperation de l'utilisateur connecte

Author: mckenziearts

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

@@ -18,8 +18,8 @@ export class AuthGuard implements CanActivateChild {
   canActivateChild(): Observable<boolean> {
     return this.store.select(selectIsLoggedIn).pipe(
       first((value) => value !== null),
-      map((isLoggedIn: boolean | null) => {
-        if (! isLoggedIn && ! this.accessTokenService.getAccessToken()) {
+      map(() => {
+        if ( ! this.accessTokenService.getAccessToken()) {
           this.router.navigateByUrl('/auth/login')
           return false;
         }

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

@@ -1,9 +1,9 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, CanActivateChild, Router, RouterStateSnapshot } from '@angular/router';
+import { CanActivateChild, Router } from '@angular/router';
 import { AccessTokenService } from '@app/modules/authentication/services/access-token.service';
 import { selectIsLoggedIn } from '@app/modules/authentication/store/auth.selectors';
 import { Store } from '@ngrx/store';
-import { filter, first, map, Observable } from 'rxjs';
+import { first, map, Observable } from 'rxjs';
 
 @Injectable({
   providedIn: 'root'
@@ -18,8 +18,8 @@ export class GuestGuard implements CanActivateChild {
   canActivateChild(): Observable<boolean> {
     return this.store.select(selectIsLoggedIn).pipe(
       first((value) => value !== null),
-      map((isLoggedIn: boolean | null) => {
-        if (isLoggedIn && this.accessTokenService.getAccessToken()) {
+      map(() => {
+        if (! this.accessTokenService.tokenExpired()) {
           this.router.navigateByUrl('/dashboard')
           return false
         }

src/app/core/guards/user-data.guard.ts

@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { first, map, Observable } from 'rxjs';
+import { CanActivateChild } from '@angular/router';
+
+import { selectCurrentUser } from '@app/modules/authentication/store/auth.selectors';
+import { getCurrentUserAction } from '@app/modules/authentication/store/auth.actions';
+import { User } from '@app/modules/user/interfaces/user.interface';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UserDataGuard implements CanActivateChild {
+  constructor(private store: Store) {}
+
+  canActivateChild(): Observable<boolean> {
+    return this.store.select(selectCurrentUser).pipe(
+      first(),
+      map((user: User | null) => {
+        if (! user) {
+          this.store.dispatch(getCurrentUserAction());
+        }
+        console.log(user);
+        return true;
+      })  
+    );
+  }
+
+}

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

@@ -1,8 +1,9 @@
-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';
 
+import { AuthState } from '@app/modules/authentication/interfaces/state.interface';
+import { authFeatureKey, authReducer } from '@app/modules/authentication/store/auth.reducer';
+
 export interface AppState {
   router: RouterState;
   [authFeatureKey]: AuthState;

src/app/modules/authentication/services/access-token.service.ts

@@ -6,16 +6,22 @@ import { Injectable } from '@angular/core';
 export class AccessTokenService {
   constructor() { }
 
-  public setAccessToken(accessToken: string): void {
+  public setAccessToken(accessToken: string, expiredIn: number): void {
     localStorage.setItem('accessToken', accessToken);
+    localStorage.setItem('expiredIn', expiredIn.toString());
   }
 
   public getAccessToken(): string | null {
-    return localStorage.getItem('accessToken');
+  return localStorage.getItem('accessToken');
   }
 
   public removeAccessToken(): void {
     localStorage.removeItem('accessToken');
+    localStorage.removeItem('expiredIn');
+  }
+
+  public tokenExpired(): boolean {
+    return !this.getAccessToken() && parseInt(localStorage.getItem('expiredIn') || '0') <= 0
   }
 
   public setLocalStorage(key: string, value: any): void {

src/app/modules/authentication/services/auth.service.ts

@@ -34,7 +34,8 @@ export class AuthService {
   }
 
   public getCurrentUser(): Observable<User> {
-    return this.http.get<User>(`${environment.apiUrl}/current-user`);
+    console.log('getCurrentUser');
+    return this.http.get<User>(`${environment.apiUrl}/user/me`);
   }
 
   public logout(): Observable<any> {

src/app/modules/authentication/store/auth.effects.ts

@@ -7,7 +7,7 @@ import { catchError, map, switchMap } from 'rxjs/operators';
 import * as AuthActions from './auth.actions';
 import { AuthService } from '../services/auth.service';
 import { Credentials, ResetPasswordCredentials } from '../interfaces/credentials.interface';
-import { AuthResponse, User } from '@app/modules/user/interfaces/user.interface';
+import { AuthResponse } from '@app/modules/user/interfaces/user.interface';
 import { AccessTokenService } from '../services/access-token.service';
 
 @Injectable()
@@ -18,14 +18,14 @@ export class AuthEffects {
       switchMap(({ credentials }: { credentials: Credentials }) => 
         this.authService.authenticate(credentials).pipe(
           map((authResponse: AuthResponse) => {
-            this.accessTokenService.setAccessToken(authResponse.data.access_token);
+            this.accessTokenService.setAccessToken(authResponse.data.access_token, authResponse.data.expires_in);
             this.router.navigateByUrl('/dashboard');
             return AuthActions.fetchAuthenticateSuccessAction({ user: authResponse.data.user });
           }),
           catchError((error) => {
             return of(
               AuthActions.authenticateFailureAction({
-                error: error.error?.message ?? 'Unknown error occurred',
+                error: error.error?.message ?? 'Une erreur est survenue',
               })
             )
           })
@@ -42,7 +42,7 @@ export class AuthEffects {
         catchError((error) => {
           return of(
             AuthActions.forgotPasswordFailureAction({
-              error: error.error?.message ?? 'Unknown error occurred',
+              error: error.error?.message ?? 'Une erreur est survenue',
             })
           )
         })
@@ -58,7 +58,7 @@ export class AuthEffects {
         catchError((error) => {
           return of(
             AuthActions.resetPasswordFailureAction({
-              error: error.error?.message ?? 'Unknown error occurred',
+              error: error.error?.message ?? 'Une erreur est survenue',
             })
           )
         }
@@ -70,7 +70,10 @@ export class AuthEffects {
     this.actions$.pipe(
       ofType(AuthActions.getCurrentUserAction),
       switchMap(() => this.authService.getCurrentUser().pipe(
-        map((user: User | null) => AuthActions.fetchCurrentUserSuccessAction({ user })),
+        map(({ data }: any) => {
+          console.log(data);
+          return AuthActions.fetchCurrentUserSuccessAction({ user: data.user })
+        }),
         catchError(() => EMPTY)
       ))
   )

src/app/modules/authentication/store/auth.reducer.ts

@@ -49,6 +49,7 @@ export const authReducer = createReducer(
         ...state,
         isLoading: false,
         error,
+        message: null,
       }
     }
   ),

src/app/modules/authentication/store/auth.selectors.ts

@@ -1,9 +1,9 @@
+import { Params } from '@angular/router';
 import { createFeatureSelector, createSelector } from '@ngrx/store';
 
 import { selectQueryParams } from '@app/core/store/router.selectors';
 import { AuthState } from '../interfaces/state.interface';
 import { authFeatureKey } from './auth.reducer';
-import { Params } from '@angular/router';
 
 const authSelectorFeature = createFeatureSelector<AuthState>(authFeatureKey);
 

src/app/modules/dashboard/routes/dashboard.routes.ts

@@ -1,6 +1,7 @@
 import { Routes } from '@angular/router';
 
 import { AuthGuard } from '@app/core/guards/auth.guard';
+import { UserDataGuard } from '@app/core/guards/user-data.guard';
 
 import { CpanelComponent } from '@app/shared/themes/layouts/cpanel/cpanel.component';
 import { DashboardComponent } from '../pages/dashboard/dashboard.component';
@@ -9,7 +10,7 @@ export const dashboardRoutes: Routes = [
   {
     path: '',
     component: CpanelComponent,
-    canActivateChild: [AuthGuard],
+    canActivateChild: [AuthGuard, UserDataGuard],
     children: [
       { path: '', component: DashboardComponent },
     ],