Question

我试图像角度文档那样设置一个儿童看守：

@Injectable()
export class AuthGuardService implements CanActivate, CanActivateChild {

  constructor(private authService: AuthentificationService, private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    let url: string = state.url;

    return this.checkLogin(url);
  }

  canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    return this.canActivate(route, state);
  }

  checkLogin(url: string): boolean {
    /*****/
    return false;
  }
}

我的routing.module：

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

const routes = [
    {
        path: '',
        component: MyComponent,
        canActivate: [AuthGuardService],
        children: [{
            path: '',
            canActivateChild: [AuthGuardService],
            children: [
                {
                    path: 'candidature',
                    component: ListCandidatureComponent,
                },
                {
                    path: 'candidature/new',
                    component: NewCandidatureComponent
                }]
        }, {
            path: 'login',
            component: LoginComponent,

        }]
    }
]

我将canActivateChild保护放在无组件部分，以通过身份验证来保护此路由。

但是使用此配置时，我试图访问“my.site.com/candidature'我有这个错误：

Unhandled Promise rejection: guard is not a function ; Zone: angular ; Task: Promise.then ; Value: TypeError: guard is not a function

通常情况下，如果我没有进行身份验证，我需要重定向到登录页面。有人得到这个错误或者知道它为什么会被发现？

感谢＆＃39; S

Answer 1

canActivateChild: [AuthGuardService],不应位于children内，而应在父路线中声明。

不确定，当你在孩子里面宣布孩子时，你需要在外面的孩子身上宣布canActivateChild。但你可以测试有没有它。让我知道它是否有效！

const routes = [
    {
        path: '',
        component: MyComponent,
        canActivate: [AuthGuardService],
        canActivateChild: [AuthGuardService] // it should be placed here!
        children: [{
            path: '',
            // canActivateChild: [AuthGuardService], // needed or not?
            children: [
                {
                    path: 'candidature',
                    component: ListCandidatureComponent,
                },
                {
                    path: 'candidature/new',
                    component: NewCandidatureComponent
                }]
        }, {
            path: 'login',
            component: LoginComponent,

        }]
    }
]

希望这有帮助！

Answer 2

如果找到我的解决方案。我为其他有同样问题的人解释。

与例外情况一样，路由模块是子路由模块的事实会启动此错误。我需要在de AppRouting中提供AuthGuardService以用于这样的子计分模块：

@NgModule({
    imports: [
        RouterModule.forRoot(routes)
    ],
    exports: [RouterModule],
    declarations: [],
    providers: [AuthGuardService] //Here add the AuthGuardService to be available in route-module-child
})
export class AppRoutingModule {}

儿童看守：canActivateChild不工作

2 个答案: