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

Question

当我使用 on 路由添加 AuthGuard 服务时canActivate，当我尝试去时应用程序崩溃 /profile并将我重定向到localhost:4200，甚至没有/home并给出此错误：

错误错误：“[对象对象]”

我的代码：

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.service.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 { }

Answer 2

我无法让它在 app.module.ts 中为我工作。它必须在 app-routing.module.ts

事实上，它必须在提供程序中，在您想要使用它的每个路由模块中。另外，请确保将 ,canActivate:[AuthGuardName] 添加到路由数组的每一行，在您要保护的每个路由模块中……