Search code examples
angularngrx-storeangular-router-guards

Implement Router Guard Based on NGRX Store


I want to implement a router guard based on the value in the store.if the user login to the application I want to get that user's role and activate the certain routes my submodule route.

I will post my current implementation but that didn't work at all

p.s I'm not using angular router store

canActivate(): {
   return this.store.pipe(select(selectUser)).pipe(
      skip(1),
      map((user) => {
        const userObj: any = user
        if (userObj.userRole === "Admin") {
          this.router.navigateByUrl('admin/tourprovider/genaral-infomation');
          return true;
        } else {
          this.router.navigateByUrl('home')
          return false;
        }

      })
     )
    }

Solution

  • I would try it like that:

    private user$: Observable<any>;
    constructor(
        private store: Store<{ user: string }>,
        private router: Router
      ) {
      this.user$ = store.pipe(select('user'));
    }
    
    canActivate(): {
      return this.user$.pipe(
        take(1),
        tap((user) => console.log(user)), // Just to test if user do have a value
        map((user: any) => (user.userRole  === "Admin") ? true : this.router.parseUrl('/home'))
      );
    }