Question

我有一个Angular应用。

在应用程序初始化上，我们应显示重定向微调器（用户未登录）
用户登录后，我们应该显示内容

我已经完成了如下操作： HTML：

<div *ngIf="(isLoggedIn$ | async); else loading">
    <!-- some other content -->
    <router-outlet></router-outlet>
</div>

<ng-template #loading>
    <app-spinner text="Redirecting..."></app-spinner>
</ng-template>

TS：

isLoggedIn$: Observable<boolean>;

constructor(private authService: AuthService) {}

ngOnInit() {
    this.isLoggedIn$ = this.authService.isLoggedIn();
}

它在应用程序init上运行良好。当用户登录后，我仍然看到重定向微调器。我必须刷新窗口才能看到路由器插座的内容。

我的临时解决方法是将<router-outlet>放在<ng-template #loading>内，例如：

<ng-template #loading>
    <app-spinner text="Redirecting..."></app-spinner>
    <router-outlet></router-outlet> <!-- HERE workaround -->
</ng-template>

但是我不想永久使用此变通办法，因为我想修复此可观察到的问题-正如我提到的那样，即使console.log（）说我已登录，它也不会刷新。

这是我的身份验证服务：

@Injectable({
    providedIn: 'root'
})
export class AuthService {

  manager: UserManager = new UserManager(environment.settings);

  constructor() {
  }

  getUser(): Observable<User> {
    return from(this.manager.getUser());
  }

  isLoggedIn(): Observable<boolean> {
    return this.getUser()
      .pipe(
        map(user => {
          return user != null && !user.expired;
        })
      );
  }

  startAuthentication(): Promise<void> {
    return this.manager.signinRedirect();
  }

  completeAuthentication(): Observable<User> {
    return from(this.manager.signinRedirectCallback());
  }

  async signOut() {
    await this.manager.signoutRedirect();
  }
}

当然，我也使用CanActivate。

Answer 1

我的解决方案是将emitCompleted方法添加到AuthService并从AuthCallback组件中调用它。

AuthService：

private isLoggedInState = new BehaviorSubject<boolean>(false);

isLoggedIn(): Observable<boolean> {
    return this.isLoggedInState.asObservable();
}

emitCompleted(user: User) {
    this.isLoggedInState.next(user != null && !user.expired);
}

AuthCallback组件：

export class AuthCallbackComponent implements OnInit {

  constructor(
    private authService: AuthService,
    private router: Router
    ) { }

  ngOnInit() {
    this.authService.completeAuthentication()
      .subscribe((result => {
        this.authService.emitCompleted(result);
      })
    );
  }
}

可观察到的更改时，角度异步管道未刷新

1 个答案: