Я разрабатываю ионное приложение, в котором я использую защиту авторизации. Охранники авторизации не позволяют загрузке экрана

Question

Я использую защиту авторизации в ионном режиме. это код в сервисе auth guads, в котором я использую canload

import { Injectable } from '@angular/core';
import { CanLoad } from '@angular/router';
import { AuthenticationService } from './Authentication.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuardService implements CanLoad {

  constructor(
    public authenticationService: AuthenticationService,
  ) { }

  canLoad(): boolean {
    return this.authenticationService.isAuthenticated();
  }

}

это код в службе аутентификации. Он проверяет, вошел ли пользователь в систему или нет, если вошел в систему, тогда состояние истинно

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { Storage } from '@ionic/storage';
import { ToastController, Platform } from '@ionic/angular';
import { BehaviorSubject } from 'rxjs';


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

  authState = new BehaviorSubject(false);

  constructor(
    private router: Router,
    private storage: Storage,
    private platform: Platform,
    public toastController: ToastController
  ) {
    this.platform.ready().then(() => {
      this.ifLoggedIn();
    });
  }

  ifLoggedIn() {
    this.storage.get('user_id').then((response) => {
      if (response) {
        this.authState.next(true);
      }
    });
  }

  logout() {
    this.storage.remove('user_id').then(() => {
      this.router.navigate(['/login'])
      this.authState.next(false);
    });
  }

  isAuthenticated() {
    return this.authState.value;
  }
}

это код в app.routing.module.ts. Здесь я использую canload auth guard, но он не позволяет открыть экран. Когда я удаляю canLoad: [AuthGuard], он работает нормально, но затем возвращается на страницу входа, если я нажимаю кнопку "Назад" в приложении.

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { AuthGuardService as AuthGuard } from './services/auth-guard.service';

const routes: Routes = [
  // {
  //   path: '',
  //   loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
  // },
  {
    path: 'native-player',
    loadChildren: () => import('./native-player/native-player.module').then(m => m.NativePlayerPageModule)
  },
  {
    path: 'signup',
    loadChildren: () => import('./signup/signup.module').then(m => m.SignupPageModule),
     canLoad: [AuthGuard]
  },
  {
    path: 'login',
    loadChildren: () => import('./login/login.module').then(m => m.LoginPageModule),
    canLoad: [AuthGuard]

  },
  {
    path: 'recent-broadcasts',
    loadChildren: () => import('./recent-broadcasts/recent-broadcasts.module').then(m => m.RecentBroadcastsPageModule),
    canLoad: [AuthGuard]
  },
  {
    path: 'broadcaster',
    loadChildren: () => import('./broadcaster/broadcaster.module').then(m => m.BroadcasterPageModule),
    canLoad: [AuthGuard]
  },
  {
    path: 'questionnaire',
    loadChildren: () => import('./questionnaire/questionnaire.module').then(m => m.QuestionnairePageModule),
    canLoad: [AuthGuard]
  },
  {
    path: 'dropdown',
    loadChildren: () => import('./dropdown/dropdown.module').then( m => m.DropdownPageModule)
  }
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

это код в app.module.ts, в котором я добавил ионное хранилище, службу authguard и службу аутентификации

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { HttpClientModule } from '@angular/common/http';

// import { Storage } from '@ionic/storage';

import { IonicStorageModule } from '@ionic/storage';
import { AuthGuardService } from './services/auth-guard.service';
import { AuthenticationService } from './services/Authentication.service';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule, IonicStorageModule.forRoot(),],
  providers: [
    StatusBar,
    SplashScreen,
    AuthGuardService,
    AuthenticationService,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Мой ionic cli - 5.4.16, а framework - @ionic/angular 5.2.3

Answer 1

В вашем Сервисе измените свой метод с

  isAuthenticated() {
    return this.authState.value;
  }

к

  isAuthenticated() {
    return this.authState;
  }

CanLoad возвращает Observable слишком:

export interface CanLoad {
    canLoad(route: Route, segments: UrlSegment[]): Observable<boolean> | Promise<boolean> | boolean;
}

Так, когда ваш пользователь аутентифицирован, он будет активирован