在以编程方式设置之前，BehaviorSubject 始终默认为 false

Question

我在我的应用程序中使用 BehaviorSubject 进行身份验证，当它设置为 true 时，这意味着用户使用令牌和有效过期时间登录，并且应用程序应将它们重定向到主页仪表板页面。如果为 false，则应提示他们登录。

除了应用程序恢复并且用户登录外，一切都按预期工作。即使用户已登录并且BehaviorSubject 设置为 true，它也会在再次检查令牌之前短暂设置为 false，然后将其设置回真。这会导致短暂导航到/intro，然后立即正确导航到/users/dashboard

有什么方法可以防止这种故障导航吗？

authentication.service.ts

export class AuthenticationService {
  state = new BehaviorSubject(false);

  constructor(
    private storage: Storage,
    private platform: Platform
  ) {
    this.platform.ready().then(() => {
      this.checkToken();
    });
  }

  /**
   * Ensures the user has access and is not passed their expiration
   */
  checkToken() {
    this.storage.get('token').then(token => {
      if (token) {
        this.storage.get('expiration').then(expiration => {
          const currentDate = moment.utc().format('YYYY-MM-DD HH:mm:ss');
          if (moment(currentDate).isBefore(expiration)) {
            this.state.next(true);
          }
        });
      }
    });
  }
}

app.component.ts

// Authentication
this.auth.state.subscribe(state => {
  alert(state);
  if (state) {
    this.menuCtrl.enable(true);
    this.router.navigate(['users', 'dashboard']);
  } else {
    this.menuCtrl.enable(false);
    this.router.navigate(['intro']);
  }
});

Answer 1

您可以通过debounceTime 设置一个仅发出最新值的时间范围。由于这种变化可能会在一瞬间发生，因此 100 毫秒在您的情况下可能太多了。考虑根据您的需要缩短时间：

this.auth.state.pipe(debounceTime(100)).subscribe(state => {
  alert(state);
  if (state) {
    this.menuCtrl.enable(true);
    this.router.navigate(['users', 'dashboard']);
  } else {
    this.menuCtrl.enable(false);
    this.router.navigate(['intro']);
  }
});

可以说在去抖动上节省一点时间的解决方案是使用仅在false 值上起作用的条件去抖动：

debounce(state => timer(state ? 0 : 100))