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.

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.

• javascript
• angular
• typescript
• server-side-rendering
• angular-guards

• Which page are you getting in the SSR response? – Chrillewoodz Commented Jan 30 at 9:26
• First login page then immediately actual page. (Network tab shows content of login page) – Shriyank Commented Jan 30 at 9:54
• This tells you that the server is unable to determine your authenticated state. Likely due to you storing the user/token in localstorage, which isn't available on the server. – Chrillewoodz Commented Jan 30 at 10:13

1 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;
};