Redirect to a different component inside @CanActivate in Angular2

Question

Is there any way we can redirect to a different component from @CanActivate in Angular2 ?

Answer 1

If you are using an observable to determine, you can leverage tap operator from rxjs:

@Injectable({
  providedIn: SharedModule // or whatever is the equivalent in your app
})
export class AuthGuard implements CanActivate {

  constructor(private authService: AuthService,
              private router: Router) {}

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable {
    return this.authService.isLoggedIn()
      .pipe(tap((isLoggedIn: boolean) => {
        if (!isLoggedIn) {
          this.router.navigate(['/']);
        }
      }));
  }

}