canActivate from angular calls the function before the queryParams find the param (angular)

Question

I'm using an canActivate class method to make an authguard from my pages, when only autorizated the user access this page if pass the boolean check. The problem is that my queryParams only find the param in the URL after the page is full loaded, anyOne know how fix it?

const routes: Routes = [
    { path: 'auth/reset', component: ResetComponent, canActivate: [AuthorizatedReset] }
];

class canActivate:

export class AuthorizatedReset implements CanActivate {


  constructor(
    private router: Router,
    private authUsecase: AuthUseCases
  ) { }
    
// canActivate returning false and session storage not being set//

      canActivate() {
        this.authUsecase.hasResetToken();
        if (sessionStorage.getItem("reset_token")) {
          return true;
        } else{
          sessionStorage.clear();
          this.router.navigate(['/auth/login']);
          return false;
        }
        
      }
      
    
    }

method to set resetToken

hasResetToken (): void {

        this.route.queryParams.subscribe(
          {
            next:  params => {
                if(params.token) {
                  sessionStorage.setItem("reset_token", params.token)
                }
              }
            }
        );
      }

the hasResetToken function is being called, but it don't find the query params, only find if I running it outside the canActivate. Any tips?

Answer 1

From your code snippet it's not clear what 'this.route' is in the hasResetToken method. The canActivate method also has an ActivatedRouteSnapshot where you can get the info.