关于使用 Observable 的 Angular 防护的问题答案

【问题标题】：Question on Angular guard with Observable关于使用 Observable 的 Angular 防护的问题
【发布时间】：2020-08-02 14:00:44
【问题描述】：

希望我能在这里得到一些澄清，并在我去的时候学习一些东西。

所以我有一个AuthService，它检查localStorage 的键和其中的值。这是一个可观察的和.next 返回的值。在 Guard 中，我引用了这个并且效果很好。但是，我注意到我在防护中没有重定向到登录页面，因此它会清空页面，当它没有被授权时就是这样。

这是我的代码。

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');
}

【问题讨论】：

stackblitz.com/edit/… 这里是工作演示...

标签： angular typescript angular-observable auth-guard

【解决方案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 并基于此重定向用户。

【讨论】：