Guard flickers page then loads actual page

Question

export const authorizedUserGuard: CanActivateFn = (route, state) => {
    console.log('guard call', route, state)
    const tokenService = inject(TokenStorageService);
    const router = inject(Router);
    let user = tokenService.getUser();
    let token = tokenService.getToken();
    if(!token || !user){
        console.log('user not logged in');
        tokenService.removeData();
        router.navigate(['/home', 'login']);
        return false;
    }
 
    return true;
    
};

Angular first loads home/login then immediately it loads actual route. I am using angular SSR. Note: token and user both variable has value and I am not getting any logs from if part in console.

return router.createUrlTree(['/home', 'login']) ;

Also has same problem.

Answer 1

When on the server, just make the guard return false.

export const authorizedUserGuard: CanActivateFn = (route, state) => {
    console.log('guard call', route, state)
    const tokenService = inject(TokenStorageService);
    const platformId = inject(PLATFORM_ID);
    const isServer = isPlatformServer(platformId); 
    if(isServer) { 
      return false; 
    }
    const router = inject(Router);
    let user = tokenService.getUser();
    let token = tokenService.getToken();
    if(!token || !user){
        console.log('user not logged in');
        tokenService.removeData();
        router.navigate(['/home', 'login']);
        return false;
    }
    return true;
};