Implementa Guard para rotas de admin

davimarinho <[email protected]>

src/app/app-routing.module.ts

@@ -13,6 +13,7 @@ import { ResetPasswordComponent } from './pages/reset-password/reset-password.co
 import { AuthGuard } from './services/auth.guard';
 import { EditUserComponent } from './pages/edit-user/edit-user.component';
 import { UpdateRoleComponent } from './pages/update-role/update-role.component';
+import { AdminGuard } from './services/admin.guard';
 
 const routes: Routes = [
   { path: 'login', component: LoginComponent },
@@ -25,7 +26,7 @@ const routes: Routes = [
   { path: 'changePassword', component: ResetPasswordComponent },
   { path: 'profile', component: ProfileComponent, canActivate: [AuthGuard], },
   { path: 'editUser/:id', component: EditUserComponent, canActivate: [AuthGuard], },
-  { path: 'update-role', component: UpdateRoleComponent, canActivate: [AuthGuard], data:{roles:["ADMIN"]} },
+  { path: 'update-role', component: UpdateRoleComponent, canActivate: [AdminGuard], },
   { path: '', component: HomePageComponent, canActivate: [AuthGuard], },
 ];
 

src/app/pages/profile/profile.component.ts

@@ -33,8 +33,6 @@ export class ProfileComponent {
   getUser() {
     this.userService.getUser(this.userId).subscribe({
       next: (data) => {
-        console.log(data);
-        localStorage.setItem('role', data.role);
         this.user = data;
       },
       error: (error) => {

src/app/services/admin.guard.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AdminGuard } from './admin.guard';
+
+describe('AdminGuard', () => {
+  let guard: AdminGuard;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    guard = TestBed.inject(AdminGuard);
+  });
+
+  it('should be created', () => {
+    expect(guard).toBeTruthy();
+  });
+});

src/app/services/admin.guard.ts

@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
+import { Observable } from 'rxjs';
+import { UserService } from './user.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AdminGuard implements CanActivate {
+  constructor(
+    private router: Router,
+    private userService: UserService
+  ) {}
+  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+    const roles = this.userService.getRoles();
+    if (roles !== "ADMIN") {
+      this.router.navigate(["/"]);
+      return false;
+    }
+    return true;
+  }
+
+}

src/app/services/auth.guard.ts

@@ -9,20 +9,12 @@ import { AuthService } from './auth.service';
 export class AuthGuard implements CanActivate {
   constructor(private authService: AuthService, private router: Router) {}
 
-  canActivate(route:ActivatedRouteSnapshot): boolean {
-    const roles: string[]= route.data?.roles;
-    console.log(roles)
-    const role = localStorage.getItem("role") || ""
-    console.log(role)
+  canActivate(): boolean {
     if (this.authService.isAuthenticated()) {
-      if (roles) {
-
-      return roles.includes(role)
-      }
       return true;
     } else {
       this.router.navigate(['/login']);
       return false;
     }
   }
-}
+}

src/app/services/user.service.ts

@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
 import { environment } from '../environment/environment';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
+import jwt_decode from 'jwt-decode';
 
 interface IGetAllUsers {
   name?: string;
@@ -40,6 +41,13 @@ export class UserService {
     return this.http.get(`${this.apiURL}/users${queryString && '?' + queryString}`, {observe: 'response'});
   }
 
+  getRoles() {
+    const access_token = localStorage.getItem("token");
+    const payload: any = jwt_decode(access_token as string);
+    const userRole: string = payload.role;
+    return userRole;
+  }
+
   updateUser(id: any, body: any): Observable<any> {
     return this.http.patch(`${this.apiURL}/users/${id}`, body);
   }