Question

运行离子应用程序时出现此错误我不确定自己在做什么，但尝试在ionic中获取身份验证登录API jwt

canActive函数就像是，但是出现错误，所以我将其更改。

CanActivate(): boolean {
    return this.authService.isAuthenticated();
  }

  NullInjectorError: No provider for Storage!
NullInjectorError: R3InjectorError(LoginPageModule)[AuthenticationService -> AuthenticationService -> Storage -> Storage -> Storage]: 
  NullInjectorError: No provider for Storage!
    at NullInjector.get (core.js:915)
    at R3Injector.get (core.js:11082)
    at R3Injector.get (core.js:11082)
    at R3Injector.get (core.js:11082)
    at injectInjectorOnly (core.js:801)
    at ɵɵinject (core.js:805)
    at Object.AuthenticationService_Factory [as factory] (ɵfac.js? [sm]:1)
    at R3Injector.hydrate (core.js:11249)
    at R3Injector.get (core.js:11071)
    at NgModuleRef$1.get (core.js:24199)
    at resolvePromise (zone-evergreen.js:798)
    at resolvePromise (zone-evergreen.js:750)
    at zone-evergreen.js:860
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:27425)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
    at Zone.runTask (zone-evergreen.js:167)
    at drainMicroTaskQueue (zone-evergreen.js:569)

我的身份验证服务代码：

import { Platform } from '@ionic/angular';
import { BehaviorSubject } from 'rxjs';
import { Storage } from '@ionic/Storage'; 
import { HttpClient } from '@angular/common/http';
const TOKEN_KEY ='auth-token';
@Injectable({
  providedIn: 'root'
})
export class AuthenticationService {
  authenticationState = new BehaviorSubject(false)
  constructor( private storage: Storage, private plt: Platform, private http: HttpClient) {
    this.plt.ready().then(()=>{
    this.chechToken();
    });
   }
    login(user){
      this.http.post('http:127.0.0.1:8001/api/user', user).subscribe(res =>{
        return this.storage.set(TOKEN_KEY,`Bearer ${res['token']}`).then( res =>{
          this.authenticationState.next(true);
        });
      });
    }
    logout(){
      return this.storage.remove(TOKEN_KEY).then ( () =>{
        this.authenticationState.next(false);
      });
    }
    isAuthenticated(){
        return this.authenticationState.value;
    }
    chechToken(){
      return this.storage.get(TOKEN_KEY).then ( res =>{
        if (res){
          this.authenticationState.next(true);
        }
      });
    }
}

我的身份保护服务

import { AuthenticationService } from './authentication.service';
import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';
@Injectable({
  providedIn: 'root'
})
export class AuthGuardService implements CanActivate {
  constructor(private authService: AuthenticationService) { 
  }
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | UrlTree | Observable<boolean | UrlTree> | Promise<boolean | UrlTree> {
    return this.authService.isAuthenticated();
  }
}

我的应用模块代码

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 { Storage } from '@ionic/storage';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

这是本教程：https://www.youtube.com/watch?v=o35Cy5ZkYU0&t=3s

Answer 1

您是否已在AppModule中使用forRoot提供了IonicStorageModule？

请参见docs：

@NgModule({
  declarations: [
    // ...
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    // Without this, Storage won't be available!
    IonicStorageModule.forRoot()
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    // ...
  ],
  providers: [
    // ...
  ]
})
export class AppModule {}

core.js：4197错误错误：未捕获（承诺）没有存储提供程序

1 个答案: