angular - I have this error: this.authService.isAuthenticated is not a function

Question

I am a beginner of angular ionic framework. I have error on my login page I have attached console screen shot.

I create this pages with below youtube video (in that video 15:55) that guy also getting same error but I dont know how that guy solved that error please anyone help to solve this.

youtube link: https://www.youtube.com/watch?v=z3pDqnuyzZ4

member-routing.module.ts

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardPageModule' },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class MemberRoutingModule { }

app-routing.module.ts

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

const routes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'login', loadChildren: './public/login/login.module#LoginPageModule' },
  { path: 'members',canActivate:[AuthGuardService],loadChildren:'./members/member-routing.module#MemberRoutingModule' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

authentication service.ts

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

const TOKEN_KEY = 'auth-token';
@Injectable({
  providedIn: 'root'
})
export class AuthenticationService {

  authenticationState = new BehaviorSubject(false);

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

  login(){
    return this.Storage.set(TOKEN_KEY,'key 12345').then(res=>{
      this.authenticationState.next(true);
    });
  }

  logout(){
    return this.Storage.remove(TOKEN_KEY).then(()=>{
      this.authenticationState.next(false);
    });
  }

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

  checkToken(){
    return this.Storage.get(TOKEN_KEY).then(res=>{
      if(res){
        this.authenticationState.next(true);
      }
    });
  }
}

auth-guard.service.ts

import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';
import { AuthenticationService } from './authentication.service';

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

  constructor(private authService: AuthenticationService) { }

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

标签： angularcordovaionic-framework

Answer 1

您必须生成 Guard not 服务

import { Injectable } from '@angular/core';
import {
        Router,
        CanActivate,
        ActivatedRouteSnapshot,
        RouterStateSnapshot
} from '@angular/router';
import { SessionService } from './session.service';

@Injectable({
  providedIn: 'root'
})
export class AfterLoginGuard implements CanActivate {
   constructor(private router: Router, private session: SessionService) {}
   canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
   const currentUser = this.session.currentUserValue;
   if (currentUser) {
      // authorized so return true
      return true;
   }

   // not logged in so redirect to login page with the return url
   this.router.navigate(['/admin/login'], {
      queryParams: { returnUrl: state.url }
   });
   return false;
  }
}

像这样。你生成一个服务而不是守卫。