interceptor et guards

src/app/app-routing.module.ts

@@ -21,28 +21,29 @@ import { PageToDoListComponent } from './pages/page-to-do-list/page-to-do-list.c
 import { PageUpdateAccountComponent } from './pages/page-update-account/page-update-account.component';
 import { PageUpdateMemberComponent } from './pages/page-update-member/page-update-member.component';
 import { FooterComponent } from './components/footer/footer.component';
+import { AuthGuard } from './auth.guard';
 
 const routes: Routes = [
   { path: '', redirectTo: 'accueil', pathMatch: 'full' },
-  { path: 'modifier-contact/:id', component: PageModifierContactComponent },
-  { path: 'compte', component: PageAccountComponent },
+  { path: 'modifier-contact/:id', canActivate: [AuthGuard], component: PageModifierContactComponent },
+  { path: 'compte', canActivate: [AuthGuard], component: PageAccountComponent },
   { path: 'accueil', component: PageAccueilComponent },
-  { path: 'ajout-membre', component: PageAddMemberComponent },
-  { path: 'agenda', component: PageAgendaComponent },
-  { path: 'tableau-de-bord', component: PageDashboardComponent },
-  { path: 'supprimer-membre', component: PageDeleteMemberComponent },
-  { path: 'supprimer-compte', component: PageDeleteAccountComponent },
+  { path: 'ajout-membre', canActivate: [AuthGuard], component: PageAddMemberComponent },
+  { path: 'agenda', canActivate: [AuthGuard], component: PageAgendaComponent },
+  { path: 'tableau-de-bord', canActivate: [AuthGuard], component: PageDashboardComponent },
+  { path: 'supprimer-membre', canActivate: [AuthGuard], component: PageDeleteMemberComponent },
+  { path: 'supprimer-compte', canActivate: [AuthGuard], component: PageDeleteAccountComponent },
   { path: 'password-oublie', component: PageForgotPasswordComponent },
-  { path: 'menu', component: PageMenuSemaineComponent },
-  { path: 'repertoire', component: PageRepertoireComponent },
+  { path: 'menu', canActivate: [AuthGuard], component: PageMenuSemaineComponent },
+  { path: 'repertoire', canActivate: [AuthGuard], component: PageRepertoireComponent },
   { path: 'reinitialisation-password', component: PageResetPasswordComponent },
   { path: 'creation-compte', component: PageSignupComponent },
-  { path: 'to-do-list', component: PageToDoListComponent },
-  { path: 'modifier-membre', component: PageUpdateMemberComponent },
-  { path: 'modifier-compte', component: PageUpdateAccountComponent },
-  { path: 'ajouter-contact', component: PageAjoutContactComponent },
-  { path: 'creation-team', component: PageCreationTeamComponent },
-  { path: 'humeur', component: PageHumeurComponent },
+  { path: 'to-do-list', canActivate: [AuthGuard], component: PageToDoListComponent },
+  { path: 'modifier-membre', canActivate: [AuthGuard], component: PageUpdateMemberComponent },
+  { path: 'modifier-compte', canActivate: [AuthGuard], component: PageUpdateAccountComponent },
+  { path: 'ajouter-contact', canActivate: [AuthGuard], component: PageAjoutContactComponent },
+  { path: 'creation-team', canActivate: [AuthGuard], component: PageCreationTeamComponent },
+  { path: 'humeur', canActivate: [AuthGuard], component: PageHumeurComponent },
   { path: 'footer', component: FooterComponent},
   { path: '**', component: PageNotFoundComponent },
 ];

src/app/auth.guard.ts

@@ -39,7 +39,7 @@ export class AuthGuard implements CanActivate {
         const dateExp = new Date(decodedToken.exp * 1000);
         if (new Date() >= dateExp) {
           // le token a expiré, je n'autorise pas l'accès
-          this.router.navigate(['account/signin']);
+          this.router.navigate(['accueil']);
           return false;
         }
       }
@@ -48,7 +48,7 @@ export class AuthGuard implements CanActivate {
       return true;
     } else {
       console.log('You shall not pass !!!!');
-      this.router.navigate(['account/signin']); // redirection de notre utilisateur vers une url de notre application (dans notre code TS)
+      this.router.navigate(['accueil']); // redirection de notre utilisateur vers une url de notre application (dans notre code TS)
       return false;
     }
   }

src/app/components/signin/signin.component.ts

@@ -28,7 +28,12 @@ export class SigninComponent implements OnInit {
     if (email !== '' && password !== '') {
       this.authService.signin(email, password).subscribe((resp) => {
         console.log('Component Signin: ', resp);
-        this.router.navigate(['tableau-de-bord']);
+        //if(resp == ){
+          this.router.navigate(['tableau-de-bord']);
+        //}else{
+         // window.alert("Votre identifiant/mot de passe est erroné");
+        //}
+        console.log('Component Signin: ', resp);
       });
     } else {
       // afficher une erreur à l'utilisateur

src/app/services/auth.interceptor.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AuthInterceptor } from './auth.interceptor';
+
+describe('AuthInterceptor', () => {
+  beforeEach(() => TestBed.configureTestingModule({
+    providers: [
+      AuthInterceptor
+      ]
+  }));
+
+  it('should be created', () => {
+    const interceptor: AuthInterceptor = TestBed.inject(AuthInterceptor);
+    expect(interceptor).toBeTruthy();
+  });
+});

src/app/services/auth.interceptor.ts

@@ -0,0 +1,31 @@
+import { Injectable } from '@angular/core';
+import {
+  HttpRequest,
+  HttpHandler,
+  HttpEvent,
+  HttpInterceptor
+} from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { TokenService } from './token.service';
+
+@Injectable()
+export class AuthInterceptor implements HttpInterceptor {
+
+  constructor(private tokenService: TokenService) {}
+
+  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
+    console.log('Coucou je suis le videur ! ');
+    const token = this.tokenService.getToken();
+      if(token) {
+
+      const authReq = request.clone(
+        {
+          headers : request.headers.set('Authorization', `Bearer ${token}`)
+        }
+        )
+        return next.handle(authReq);
+    } else {
+    return next.handle(request);
+  }
+}
+}

src/app/services/auth.service.ts

@@ -14,7 +14,7 @@ export class AuthService {
   private tokenKey: string;
 
   constructor(private http: HttpClient) {
-    // On se sert des variables d'environnement de notre application
+
     this.apiUrl = environment.apiUrl;
     this.tokenKey = environment.tokenKey;
   }
@@ -34,19 +34,14 @@ export class AuthService {
     };
 
     console.log('Mon body : ', body);
-
-    // Modifier cette partie ci-dessous :
-    // - pour pouvoir stocker dans le localstorage notre accesstoken
-    // - Sous la clé "TOKEN-LBP"
-
     return this.http.post(`${this.apiUrl}/membres/sign-in`, body).pipe(
       map((x: any) => {
         console.log('Service : ', x.token);
-        // Modification à faire ici
         localStorage.setItem(this.tokenKey, x.token);
         return x; // permet de renvoyer la réponse à l'initiateur (page Signin) après le traitement du map
       })
     );
+
   }
 
   forgotPassword(email: string): Observable<any> {