如何设置child模块路由数据？

Question

我正在尝试设置一个数组，其中包含访问路由所需的角色。如果路由角色与用户角色匹配，则授予访问权限。这是由 AuthGuard 完成的。

我的路由模块是这样配置的：

const ROUTES: Routes = [
    {
        path: "",
        component: FullLayoutComponent,
        canActivate: [AuthGuard],
        children: [
            {
                path: "",
                redirectTo: "dashboard",
                pathMatch: "full",
            },
            {
                path: "dashboard",
                loadChildren: "./dashboard/dashboard.module#DashboardModule",
            },
            {
                path: "admin",
                loadChildren: "./admin/admin.module#AdminModule",
                data: { roles: [Role.Admin] }
            }
        ]
    },
    {
        path: "",
        component: NoLayoutComponent,
        children: [
            {
                path: "auth",
                loadChildren: "./auth/auth.module#AuthModule"
            },
            {
                path: "**",
                redirectTo: "/404"
            }
        ]
    }
];

这是 AuthGuard:

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

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

    constructor(private router: Router, private authenticationService: AuthService) {

    }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        const currentUser = this.authenticationService.user;

        if (currentUser) {

            // check if route is restricted by role
            console.log("route.data.roles", route.data.roles); // undefined
            console.log("route.parent.data.roles", route.parent.data.roles); // undefined
            console.log("user.roles", this.authenticationService.user.roles); // ok

            if (route.data.roles && !this.authenticationService.userHasRole(route.data.roles)) {
                // role not authorised so redirect to home page
                this.router.navigate(['/']);
                return false;
            }

            return true;
        }

        // not logged in so redirect to login page with the return url
        this.router.navigate(['/auth/login'], { queryParams: { returnUrl: state.url } });
        return false;
    }
}

路由数据始终打印未定义。

我猜路由数组的嵌套结构有问题，因为如果我在第一条路由中设置 data，则由 [=25 处理的那个=]FullLayoutComponent，效果很好。但这并不能完成工作，因为我需要能够为不同的 children.

指定不同的角色

我尝试了几个变体，例如，在 AdminModule 内的路由中设置数据属性，但没有成功。它总是未定义的。

Answer 1

我在这里回答自己，以防对其他人也有帮助。

对我有用的解决方案是摆脱 FullLayoutComponent 和 NoLayoutComponent，然后使用组件或模块正常处理路由。

const ROUTES: Routes = [
    {
        path: "",
        redirectTo: "dashboard",
        pathMatch: "full",
    },
    {
        path: "dashboard",
        component: DashboardComponent,
        canActivate: [AuthGuard]
    },
    {
        path: "admin",
        loadChildren: "./admin/admin.module#AdminModule",
        canActivate: [AuthGuard],
        data: { roles: [Role.Admin] }
    },
    {
        path: "auth",
        loadChildren: "./auth/auth.module#AuthModule"
    },
    {
        path: "404",
        loadChildren: "./pages/four-zero-four/four-zero-four.module#FourZeroFourModule"
    },
    {
        path: "**",
        redirectTo: "/404"
    }
];

使用该路由配置，AuthGuard 可以按预期工作，我唯一要做的更改是调整布局以在用户未登录时隐藏侧边栏和header。

如何设置child模块路由数据？

How to set child module route data?

angular-routing

angular