Как использовать класс BehaviorSubject для перенаправления пользователя на домашнюю страницу после входа в систему, похоже, он не работает должным образом

Question

Я занимаюсь разработкой приложения IONIC 4 и хочу аутентифицировать пользователей, прежде чем они смогут перейти на домашнюю страницу.Как избежать мерцания экрана входа в систему после успешной аутентификации?

Это приложение IONIC 4 с поддержкой angular 6.Я использую хранилище для сохранения токена JWT, чтобы пользователь не заходил на экран входа в систему при каждом запуске приложения.

app-routing.module.ts

{ path: 'home', canActivate: [AuthGuardService], loadChildren: './home/home.module#HomePageModule' }

app.component.ts

this.authenticationService.authenticationState.subscribe(state => {
    if (state) {
      console.log("inside if, state=" + state);
      this.router.navigate(['home'], {skipLocationChange: true});
    } else {
      console.log("inside else, state=" + state);
      this.router.navigate(['signup1'], {skipLocationChange: true});
    }
  });

authentication.service.ts

const TOKEN_KEY = 'auth-token';

authenticationState = new BehaviorSubject(false);

  constructor(private storage: Storage, private plt: Platform) {
this.plt.ready().then(() => {
  this.checkToken();
});
  }
   checkToken() {
this.storage.get(TOKEN_KEY).then(res => {
  if (res) {
    this.authenticationState.next(true);
  }
})
 }
isAuthenticated() {
return this.authenticationState.value;
  }
login() {
return this.storage.set(TOKEN_KEY, 'Bearer 1234567').then(() => {
  this.authenticationState.next(true);
});
 }

auth-gaurd.service.ts

 canActivate(): boolean {
return this.auth.isAuthenticated();
 }

Приложение должно перенаправить пользователя на домашнюю страницу после получения токена JWTв хранилище без отображения страницы входа.Тем не менее, он мигает экран входа и затем перенаправляет на домашнюю страницу.

Пожалуйста, проверьте вывод на моем устройстве

https://drive.google.com/file/d/1Qz_1ExUB1d_I0r71sQ2sX1F4RFC5680E/view?usp=drivesdk

Answer 1

Хорошо, я думаю, что получил, поэтому вы можете попробовать изменить тему на

authenticationState = new BehaviorSubject(null);

и в компоненте:

this.authenticationService.authenticationState.filter(x => x !== null).take(1).subscribe(...)

или использовать трубу

this.authenticationService.authenticationState.pipe(
   filter(x => x !== null),
   take(1)
).subscribe(...)

Надеюсь, это поможет.