如何正确使用 CanActivate 进行子路由？

Question

我正在为我的路由器及其子路由器使用CanActivate 功能，但它不起作用 - 几个月前一直在使用相同的功能，但现在没有。

没有错误、警告或类似的东西我可以调试...应用程序刚刚运行，我可以像所有其他路由一样正常访问我想要保护的路由器。

你能看看下面的代码有什么问题吗？ 问题是我什至没有得到任何错误。

作为信息，我正在使用 Angular 5。

app.router.ts：

export const router: Routes = [

    { path: '', redirectTo: 'home', pathMatch: 'full'},
    { path: 'home', component: HomeComponent},
    { path: 'signup', component: SignupComponent},
    { path: 'dashboard', canActivate: [ AuthguardGuard ],
            children:
            [
                { path: '', loadChildren: './dashboard/dashboard.module#DashboardModule', pathMatch: 'full' }
            ]
    },

    { path: '**', redirectTo: 'page-not-found' }

];

export const appRoutes: ModuleWithProviders = RouterModule.forRoot(router);

dashboard.module.ts：

const dashboardRoutes: Routes = [

    { path: 'user', redirectTo: 'user', pathMatch: 'full' },
    { path: 'user', component: UserComponent,
        children: [
            { path: '', component: EditComponent },
            { path: 'userMail', component: UserMailComponent },
            { path: 'userSettings', component: UserSettingsComponent}
        ]
    },
];

authguard.guard.ts：

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { AuthService } from './_service/auth.service';


@Injectable()
export class AuthguardGuard implements CanActivate {
    constructor( private user: AuthService ) {
        console.log('In AuthGuard!');
    }
    canActivate(
        next: ActivatedRouteSnapshot,
        state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
        return this.user.isUserAuthenticated();

    }
}

auth.service.ts：

import { Injectable } from '@angular/core';

@Injectable()
export class AuthService {

    public isUserAuthenticated;
    private userName;

    constructor() {
        this.isUserAuthenticated = false;
    }

    setUserLoggedIn() {
        this.isUserAuthenticated = true;
    }

    getUserLoggedIn() {
        return this.isUserAuthenticated;
    }

}

Answer 1

问题已解决...我从 app.router.ts 中删除了这部分：

{path: '', loadChildren: './dashboard/dashboard.module#DashboardModule', pathMatch: 'full'}

并按如下方式使用：

export const router: Routes = [

    { path: '', redirectTo: 'home', pathMatch: 'full'},
    { path: 'home', component: HomeComponent},
    { path: 'signup', component: SignupComponent},
    { path: 'dashboard', canActivate: [ AuthguardGuard ],
        children:[
           { path: '', component: EditComponent },
           { path: 'userMail', component: UserMailComponent },
           { path: 'userSettings', component: UserSettingsComponent}
        ]
    },

    { path: '**', redirectTo: 'page-not-found' }
];
export const appRoutes: ModuleWithProviders = RouterModule.forRoot(router);

而且我可以访问 authguard.guard.ts 文件，我可以直接得到预期的结果。