Vfrdtyky

EDIT: I update the code with the answer that PierreDuc gave me. He's solution works for me. I edit the code so everyone could see the working code

I'm using canActivate and canActivateChild to know if someone have token for my web and I want to block anyone who don't have token already.
I'm using localStorage for the user data and token.

When I try to login with user id:1, the guard navigate to page not found, but after I refresh the page I gain access to the page.
When I used debugger I saw that before I refreshed the localStorage was empty but had values after the refresh.

Why this is happening? how can I fix it?
This is the relevant code:

app-routing.module.ts

const appRoutes: Routes = [

  { path: 'login/:id', canActivate: [AuthGuard], children:  },

  { path: '', canActivateChild: [AuthGuard], children: [

    { path: '', redirectTo: '/courses', pathMatch: 'full' },

    { path: 'courses', component: CourseListComponent,  pathMatch: 'full'},

    { path: 'courses/:courseId', component: CourseDetailComponent, pathMatch: 'full' },

    { path: 'courses/:courseId/unit/:unitId', component: CoursePlayComponent,

      children: [

        { path: '', component: CourseListComponent },

        { path: 'lesson/:lessonId', component: CourseLessonComponent, data:{ type: 'lesson'} },

        { path: 'quiz/:quizId', component: CourseQuizComponent, data: {type: 'quiz'} }

      ]}

    ]},

  { path: '**', component: PageNotFoundComponent, pathMatch: 'full' }];

auth.guard.ts

export class AuthGuard implements CanActivate , CanActivateChild {



    constructor(private authUserService: AuthUserService, private router: Router) {   }



    canActivate(route: ActivatedRouteSnapshot, state:

    RouterStateSnapshot): boolean |

    Observable<boolean> | Promise<boolean> {

      // save the id from route snapshot

      const id = +route.params.id;



      // if you try to logging with id

      if (id) {

        this.router.navigate(["/courses"]);

        return this.authUserService.login(id);

      }



      // if you already logged and just navigate between pages

      else if (this.authUserService.isLoggedIn())

         return true;



      else {

        this.router.navigate(["/page_not_found"]);

        return false;

      }

     }



      canActivateChild(route: ActivatedRouteSnapshot,state: RouterStateSnapshot): boolean |

      Observable<boolean> | Promise<boolean> {

         return this.canActivate(route, state);

       }



}

auth-user.service.ts

import { Injectable, OnDestroy } from '@angular/core';

import { Observable , BehaviorSubject } from 'rxjs';

import { LocalStorage } from '@ngx-pwa/local-storage';

import { of } from 'rxjs';

import { map } from 'rxjs/operators';

import { catchError, groupBy } from 'rxjs/operators';



import { UserService } from './user.service';

import { IUser } from './user';



@Injectable()

export class AuthUserService implements OnDestroy {



  private user: IUser;

  private errorMessage: string;



  constructor(private userService: UserService) { }



  // store the session and call http get

  login(id: number) {

    return this.userService.getUser(id).pipe(

      map((user) => {

        this.user = user;

        localStorage.setItem('user', JSON.stringify(this.user));

        localStorage.setItem('token', 'JWT');

        return true;

      }),

      catchError((error) => {

        this.errorMessage = <any>error;

        return of(false);

      })

    );

  }



  isLoggedIn() {

   return !!localStorage.getItem('token');

  }



  ngOnDestroy() {

    localStorage.removeItem('user');

    localStorage.removeItem('token');

  }

}

The userService.getUser is async, it won't be finished and will set your localStorage after you already checked it.

Change your authService to this:

login(id: number) {

  return this.userService.getUser(id).pipe(

    map((user) => {

      this.user = user;

      localStorage.setItem('user', JSON.stringify(this.user));

      localStorage.setItem('token', 'JWT');

      return true;

    }),

    catchError((error) => {

      this.errorMessage = <any>error;

      return of(false);

    })

  );

}

And update your guard to this:

if (id) {

  this.router.navigate(["/courses"]);

  return this.authUserService.login(id);

}