Angular2 auth guard使用observable跟踪当前用户

Question

我是Angular的新手，我正在尝试在我的应用程序中编写一个身份验证保护，我知道我每次都可以访问我的服务器，并获得有关登录用户的会话信息。但我想在整个应用程序中跟踪登录的用户……

app.component.ts

  export class AppComponent implements OnInit {
  title = 'APPTITLE';
  logged_in = true;

  constructor(private authService: AuthenticationService){}
  ngOnInit(){
    this.authService.isAuthenticated.take(1)
    .subscribe(res => {
      console.log(res);
      this.logged_in = res});
  }
}

AuthenticationService.ts

@Injectable()
export class AuthenticationService {    
    private currentUserSubject = new BehaviorSubject<IUser>(<IUser>{});
    public currentUser = this.currentUserSubject.asObservable().distinctUntilChanged();
    private isAuthenticatedSubject = new ReplaySubject<boolean>(1);
    public isAuthenticated = this.isAuthenticatedSubject.asObservable();
    private isAdminSubject = new ReplaySubject<boolean>(1);
    public isAdmin = this.isAdminSubject.asObservable();

    constructor(private http: HttpService) {
        this.isAuthenticatedSubject.next(false);
        this.isAdminSubject.next(false);
    }

    login(username: string, password: string, onSuccess: (data) => void, onError: (data) => void=null): any {
        this.isAuthenticatedSubject.next(true);
        let query_url = 'login';
        let payload = JSON.stringify({username: username, password: password});
        return this.http.post(query_url, payload)
        .subscribe(user => {
            this.currentUserSubject.next(user);
            this.isAuthenticatedSubject.next(true);
            if (user.usertype == 'admin') this.isAdminSubject.next(true);
            onSuccess(user);
        },
        error => {
            if (onError){
                onError(error);
            }
        });
    }

    logout() {
        let query_url = 'logout';
        return this.http.post(query_url, null)
        .subscribe(res => {
            this.currentUserSubject.next(null);
            this.isAuthenticatedSubject.next(false);
            this.isAdminSubject.next(false);
        })
    }
}

auth-guard.ts

@Injectable()
export class AuthGuardService implements CanActivate {

  constructor(private router: Router, private authService: AuthenticationService) {

  }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean>{
    return this.authService.isAuthenticated.take(1)
  }
}

login.component.ts

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
  providers: [AuthenticationService]
})

export class LoginComponent implements OnInit {
    error_message: string = 'Login Unsuccessful'
  login_info: any = {};

  constructor(public router: Router, 
    private authenticationService: AuthenticationService) {

  }

  ngOnInit() {
  }

  formSubmitted(data): void {
    this.login(data.username, data.password);
  }


  login(username, password) {
    event.preventDefault();
    this.authenticationService.login(username, password, (data) => {
      console.log(data);
    },
    (err) => {
      console.log(err);
    })
}

auth-guard在这里总是返回false，我不知道为什么。在auth-guard和login中定义的认证服务是不同的实体吗？

Answer 1

return this.authService.isAuthenticated.take(1)

始终返回第一个值。

take的

文档:从可观察序列的开始返回指定数量的连续元素

将其更改为

return this.authService.isAuthenticated;

Answer 2

这可能是因为您从一个空的(或刚初始化的)主题创建了可观察对象。Observable是在实例化时将值一次带入主题中。如果你想把它当做一个可观察对象使用，在一个方法或getter中实例化它。

get isAuthenticated ()  { return this.isAuthenticatedSubject.asObservable(); }