1

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

所以我有一个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');
}
4

1 回答 1

2

此StackBlitz Link中的工作演示

**

编辑 [如果你不想使用第三个变量]

服务.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);
     }
   });  
 }
}

你的卫士.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 并基于此您可以重定向用户。

于 2020-04-20T06:31:35.367 回答