0

我在离子中使用身份验证守卫。这是我正在使用 canload 的 auth guads 服务中的代码

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 保护，但它不让打开屏幕。当我删除 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，框架是 @ionic/angular 5.2.3

4

1 回答 1

0

在您的服务中更改您的方法

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

至

  isAuthenticated() {
    return this.authState;
  }

CanLoad也返回一个Observable：

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

就像这样，当您的用户通过身份验证时，它将被激活

于 2020-07-17T10:23:51.820 回答