错误：Uncaught（在承诺中）：TypeError：guard不是一个函数。

Question

我正在使用Angular 4编写一个Authguard来防止未登录访问路由。但是，我遇到了这个错误。以下是来自Authgaurd和App模块中Routing的代码。请帮助解决问题。

//Authgaurd代码

import { ActivatedRouteSnapshot, CanActivate, Route, Router, 
RouterStateSnapshot } from '@angular/router';
import { Store } from '';
import { Observable } from 'rxjs/Observable';
import { map, take } from 'rxjs/operators';
import { Observer } from 'rxjs';
import { Globals } from '../../app.global';
import { CRMStorageService } from '../services/storage.service';
import 'rxjs/add/operator/take';

@Injectable()
export class AuthGuard implements CanActivate {

constructor(private router: Router,private storageService: StorageService) { 
 }

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): 
Observable<boolean> {
return this.storageService.getItem(Globals._CURRENT_USER_KEY).take(1).map 
(token => {
    if (token) {
        return true;
    } else {
        this.router.navigate(['/login']);
    }
  });
}
}

//应用程序模块中的路由

const appRoutes: Routes = [
{ path:'',redirectTo:'/login', pathMatch: 'full' },
{ path:'login', component: LoginComponent },
{ path:'reset/:token', component: ResetpasswordComponent },
{
path: '',
canActivateChild: [AuthGuard],
children: [
{ path:'dashboard', component: DashboardComponent },
{ path:'customerlist', component: CustomerlistComponent }
]
},
{ path: '**', component: ErrorComponent }
];

@NgModule({
imports: [
        RouterModule.forRoot(appRoutes,
        {
         enableTracing: false // <-- debugging purposes only
        })],
 declarations: [
  AppComponent,
 .
 .
],
providers: [AuthGuard],
exports: [],
bootstrap: [AppComponent]})

export class AppModule { }

- user8300647

---

在 appRoutes 中，你正在使用 canActivateChild，但在 AuthGuard 中，你实现的是 CanActivate 而不是 CanActivateChild。 - cyberpirate92

Answer 1

你必须在AuthGuard上实现CanActivate和CanActivateChild接口，才能在canActivateChild中使用它。

export class AuthGuard implements CanActivate, CanActivateChild {
  ...
  canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):  boolean {
      return this.canActivate(route, state);
 }
}

- omyfish

Answer 2

只需在路由处理程序中将canActivateChild替换为canActivate，它就可以工作了。

const appRoutes: Routes = [
    { path: '', redirectTo: '/login', pathMatch: 'full' },
    { path: 'login', component: LoginComponent },
    { path: 'reset/:token', component: ResetpasswordComponent },
    {
        path: '',
        canActivate: [AuthGuard],
        children: [
            { path: 'dashboard', component: DashboardComponent },
            { path: 'customerlist', component: CustomerlistComponent }
        ]
    },
    { path: '**', component: ErrorComponent }
];

@NgModule({
    imports: [
        RouterModule.forRoot(appRoutes,
            {
                enableTracing: false // <-- debugging purposes only
            })],
    declarations: [
        AppComponent,
    .
    .
    ],
    providers: [AuthGuard],
    exports: [],
    bootstrap: [AppComponent]
})

export class AppModule { }

- Vasim Hayat

---

30分钟后我找到了这个。太棒了！讲解得很好。 - Chris Tarasovs