Вопрос по Angular охраннику с наблюдаемой

Question

надеюсь, я смогу кое-что прояснить здесь и узнать все как я go.

Итак, у меня есть AuthService, который проверяет localStorage на ключ и значения в нем. Это наблюдаемое и .next значение обратно. В Гвардии я ссылаюсь на это, и все работает отлично. Тем не менее, я заметил, что у меня нет перенаправления на страницу входа в стороже, поэтому она закрывает страницу, и все, когда она не авторизована.

Вот мой код.

isLoggedIn(): Observable<boolean> {
  return new Observable((o) => {
    try {
      const cda = JSON.parse(localStorage.getItem('cda'));
      if (cda && cda.token) {
        console.log('Yes logged in');
        o.next(true);
      } else {
        console.log('Not logged in');
        o.next(false);
      }
    } catch (e) {
      console.log('Catch - Not logged in');
      o.next(false);
    }
  });
}

export class GuardGuard implements CanActivate {
  constructor(
    public auth: AuthService,
    public router: Router,
  ) { }

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    return this.auth.isLoggedIn();
  }
}

Как мне преобразовать это Observable из AuthService, чтобы я мог сделать что-то вроде

if (!isLoggedIn) {
   this.router.navigateByUrl('/login');
}

Answer 1

Рабочая демонстрация в этом StackBlitz Link

**

РЕДАКТИРОВАТЬ [Если вы не хотите использовать третью переменную]

service.ts

@Injectable()
export class DataService {
   constructor() { }
   isLoggedIn(): Observable<boolean> {
     return new Observable((o) => {
        try {
           const cda = JSON.parse(localStorage.getItem('cda'));
           if (cda && cda.token) {
              console.log('Yes logged in');
              o.next(true);
           } else {
             console.log('Not logged in');
             o.next(false);
           }
       } catch (e) {
         console.log('Catch - Not logged in');
         o.next(false);
     }
   });  
 }
}

your-guard.ts

export class RouterGuard implements CanActivate {
constructor(private dService : DataService,
          private router: Router){}
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
       return this.dService.isLoggedIn().pipe(
        map(value =>  {
          if(!value) this.router.navigate(['/login'])
          return value;
        })
      )
    }
}

**

- --- РЕДАКТИРОВАТЬ ЗАВЕРШЕНО ----

В вашей службе охраны вам нужно ...

canActivate(next: ActivatedRouteSnapshot,
          state: RouterStateSnapshot): Observable<boolean> {

      return this.auth.getIsUserLoggedIn() ? true : this.router.navigateByUrl('/login');
}

и в вашем authSevice вам нужно ...

isLoggedin: boolean;

isLoggedIn(): Observable<boolean> {
  return new Observable((o) => {
    try {
     const cda = JSON.parse(localStorage.getItem('cda'));
     if (cda && cda.token) {
       console.log('Yes logged in');
       this.isloggedin = true;
       o.next(true);
     } else {
       console.log('Not logged in');
       this.isloggedin = true;
       o.next(false);
     }
    } catch (e) {
     console.log('Catch - Not logged in');
     o.next(false);
   }
 });

}

 getIsUserLoggedIn(){
     return this.isloggedin;
 }

По сути, возвращайте true или false и основываясь на этом вы можете перенаправить пользователя.