angular - Auth Guard canActivate 由于某种原因无法正常工作

Question

当我在路由上添加带有 canActivate 的 AuthGuard 服务时，当我尝试转到 /profile 时应用程序崩溃并将我重定向到 localhost:4200，甚至不是 /home 并给出此错误:

ERROR Error: "[object Object]"

我的代码:

app.routing.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule, CanActivate } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ProfileComponent } from './profile/profile.component';
import { LoginComponent } from './login/login.component';

import { AuthGuardService as AuthGuard } from './auth-guard.service';

const routes: Routes = [
  {path:'', redirectTo:'/home', pathMatch:'full'},
	{path:'home',component: HomeComponent},
  {path:'login',component: LoginComponent},
  {path:'profile',component: ProfileComponent,canActivate: [AuthGuard]}
];

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

app.module.ts

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { ProfileComponent } from './profile/profile.component';
import { TopbarComponent } from './topbar/topbar.component';

import { AuthGuardService as AuthGuard} from './auth-guard.service';
import { AuthService} from './auth.service';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    LoginComponent,
    ProfileComponent,
    TopbarComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [AuthGuard, AuthService],
  bootstrap: [AppComponent]
})
export class AppModule { }

auth-guard.servce.ts

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot } from '@angular/router';
import { AuthService } from './auth.service';

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

  constructor(public auth: AuthService, public router: Router) { }

  canActivate():boolean{
          if (localStorage.getItem('currentUser')) {
              // logged in so return true
              return true;
          }

          // not logged in so redirect to login page
          this.router.navigate(['/login']);
          return false;
      }
}

这是行不通的!

Answer 1

有同样的问题，解决方案是在我的 app.module.ts 中将 Auth Guard 添加到我的提供商

您还应该确保这是唯一的文件，它被添加到提供程序中。

import { AuthGuardService } from './auth-guard.service';

@NgModule({
  declarations: [
      // whatever your declarations are
  ],
  imports: [
      // Whatever your imports are
  ],
  providers: [
      AuthGuardService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }