AuthGuard with HTTP Request Error (HTTP Request return = undefined)

Question

i try to implement a AutGuard with a HTTP Get Request. but the http request dont work. the variable userRole is undefined and the get request doesnt work. (the adminService.getUserByToken... works on Components). is it possible to http request in the auth guard class?

Aut.guard.ts:

import { Injectable, OnInit } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router} from '@angular/router';
import { map, Observable } from 'rxjs';
import { AdminService } from '../services/admin.service';
import { UserAuthService } from '../services/user-auth.service';
import { UserService } from '../services/user.service';
import { User } from '../_model/user';

@Injectable({
  providedIn: 'root',
})
export class AuthGuard implements CanActivate, OnInit {

  userRole!: string;
  role: string[] = ['Admin', 'User']

  constructor(
    private userAuthService: UserAuthService,
    private router: Router,
    private adminService: AdminService,
    private userService: UserService
  ) {}

  ngOnInit(): void {
    this.getUserByToken();
  }

  public getUserByToken() {
    this.adminService.getUserByToken().subscribe(data => { 
      this.userRole = data.userRole;
    })
  }

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ):
    | Observable<boolean | UrlTree>
    | Promise<boolean | UrlTree>
    | boolean
    | UrlTree {
    if (this.userAuthService.getToken() !== null) {
        const role = route.data['roles'] as string;
        if (role === this.userRole) {
            return true;
          } else {
            console.log(this.userRole)
            this.router.navigate(['/forbidden']);
            return false;
          }
        }
      this.router.navigate(['/login']);
      return false;
    });
  }

}

user.service.ts:

  public getUserRoleWhileLoggedIn(): Observable<User>{
    const headers = new HttpHeaders({ 
      'No-Auth': 'False',
      'Content-Type': 'application/json'})
    return this.httpClient.get<User>(this.PATH_OF_API + "/userRole", {headers});
  }

app-routing.module.ts

  {path: 'user-activation-settings', component: UserActivationSettingsComponent, canActivate:[AuthGuard], data:{roles:['Admin']} },
  {path: 'appointment-offers', component: AppointmentOffersComponent, canActivate:[AuthGuard], data:{roles:['Admin']} },
  {path: 'update-termin/:id', component: UpdateTerminComponent},
  {path: '**', redirectTo: 'startseite', pathMatch: 'full'}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [AuthGuard]
})
export class AppRoutingModule {

AuthGuard with HTTP Request Error (HTTP Request return = undefined)

0 Answers0