Question

我使用angular2 rc.3和@ angular / router＆＃34;：＆＃34; 3.0.0-alpha.7

我的auth.server

export class AuthService {
  isLogged:boolean;
  constructor(private principal:PrincipalService){
  this.authenticated();
}
  authenticated() {
    this.principal.currentUser().subscribe(
      e=> {
        if (!!e && e.authenticated) {
          this.isLogged = true;
        }
        this.isLogged = false;
      },
    error=> {
      this.isLogged = false;
    }
    )
  }

AuthGuard：

constructor(private auth:AuthService )  {}
canActivate(next: ActivatedRouteSnapshot,state: RouterStateSnapshot): boolean{ 
   // here the **auth.isLogged** is undefined !! why?**
    if(this.auth.isLogged){
      return true;
    }
     else {
      window.location.href='/login';
      return false;
    }

我设置了路由器

{
      path: 'property',
      component: PropertyHomeComponent,
      canActivate: [AuthGuard]
    }

当我打开＆＃39; / property＆＃39;页面，AuthGuard无法读取＆＃34; this.auth.isLogged＆＃34; ，并且没有重定向到＆＃39; / login＆＃39;页面，

如何解决？

Answer 1

我找到了革命。（感谢@Michael的提示）

<强> AuthGuard

 return this.principal.currentUser().map(e=> {
      if (e) {
        return true;
      }
    }).catch(()=> {
      window.location.href = ConstantService.loginUrl;
      return Observable.of(false)
    })
  }

Answer 2

在AuthGuard的isLogged方法试图访问它时，似乎没有设置canActivate。这是因为该变量的设置是异步的。

幸运的是，根据angular routing docs

因此，路由保护可以返回Observable<boolean>，路由器将等待观察者解析为true或false。

因此，在您的情况下，您可以将isLogged更改为observable，如下所示：

import { AsyncSubject } from 'rxjs/AsyncSubject';
export class AuthService {
  isLogged: AsyncSubject<boolean> = new AsyncSubject();
  constructor(private principal:PrincipalService){
  this.authenticated();
}
  authenticated() {
    this.principal.currentUser().subscribe(
      e=> {
        if (!!e && e.authenticated) {
          this.isLogged.next(true);
        } else {
          this.isLogged.next(false);
        }
        this.isLogged.complete();
      },
      error=> {
        this.isLogged.next(false);
        this.isLogged.complete();
      }
    )
  }

然后您需要更改AuthGuard的canActivate以返回可观察的内容：

canActivate(next: ActivatedRouteSnapshot,state: RouterStateSnapshot): boolean {
  return this.auth.isLogged
    .do(
      isLoggedIn => { if(!isLoggedIn) this.router.navigate(['/login']) },
      error => console.error(error)
    );

isLogged的值将以Observable<boolean>的形式返回。如果observable解析为do，false方法将导航到/ login页面。

如果有效，请告诉我。我对rxjs（Observables）和路由器不太熟悉。

可以激活＆＃39; authGuard＆＃39;无法阅读＆＃39;可观察的当前用户＆＃39; AuthServer

2 个答案: