Angular 使用两种不同的可能路线实现主页

google.com

是主页。我需要两个不同的主页路线。第一条路由在用户未登录（Auth）时工作，第二条路由在用户登录（仪表板）时工作

当auth和dashboard页面都在一个主页上工作，而不是在不同的URL上工作时，最难的部分是

注意：两个模块都有多个组件。Auth有（login-signup-reset）组件，而Dashboard有（index-users-posts）组件

const routes:routes=[
{
路径：'索引'，
loadChildren:“./modules/index/index.module#IndexModule”
},
{
路径：“错误”，
loadChildren:“./modules/error/error.module#ErrorModule”
},
//未匹配先前路由时的回退
{路径：'**'，重定向到：'未找到'，路径匹配：'完整'}
];
@NGD模块({
导入：[RouterModule.forRoot（路由，{useHash:false}）]，
导出：[路由模块]，
提供者：[]
})
导出类AppRoutingModule{}

const routes:routes=[
{
路径：“”，
儿童：[
{
路径：“”，
loadChildren:“./modules/home/home.module#HomeModule”，
canLoad:[AuthGuard]，
},
{
路径：“auth”，
loadChildren:“./modules/auth/auth.module#AuthModule”，
canLoad:[NoAuthGuard]
},
]
}
];
@NGD模块({
导入：[RouterModule.forChild（路由）]，
导出：[路由模块]
})
导出类IndexRoutingModule{}

const routes:routes=[
{
路径：“”，
组件：HomeLayoutComponent，
路径匹配：“已满”，
儿童：[
{
路径：“”，
重定向到：“仪表板”，
路径匹配：“已满”
},
{
路径：“仪表板”，
组件：仪表板组件，
数据：{title:'Dashboard'}
},
]
},
];
@NGD模块({
导入：[RouterModule.forChild（路由）]，
导出：[路由模块]
})
导出类HomeRoutingModule{}

const routes:routes=[
{
路径：“”，
组件：AuthLayoutComponent，
路径匹配：“已满”，
儿童：[
{
路径：“”，
重定向到：“登录”，
路径匹配：“已满”
},
{
路径：“登录”，
组件：LoginComponent，
数据：{title:'登录到管理员'}
},
]
}
];
@NGD模块({
进口：[
RouterModule.forChild（路由）
],
出口：[
路由模块
]
})
导出类AuthRoutingModule{}

问题只在于路线，而不是警卫，什么都不是

第一个路由在用户未登录（Auth）时工作，第二个路由在用户登录（Dashboard）时工作

这很棘手，因为用户的状态很难从路由器配置访问

我建议您使用UrlMatcher来控制使用哪个路由配置以及何时使用

棘手的部分是访问当前用户的登录状态，我假设只有服务知道该状态。类似于

UsersService.isLogged（）

的东西，它返回一个可观察的true/false，因为它可能需要联系服务器来恢复以前的会话

所以我要做的是使用一个激活器将这个状态读入一个全局变量，然后使用UrlMatcher中的那个变量。激活器不会对路由进行任何逻辑控制，因为它将始终生成一个true来激活路由。我们只想获得对服务的访问权并执行异步操作

如果定义一个使用激活器的空父路由，那么我假设Angular将在处理子路由之前解析激活器

let globalUserState = false;

class UserActivator implements CanActivate {
    public constructor(private users: UserService) {
    }

    public canActivate(): Observable<boolean> {
        return this.users.isLoggedIn().pipe(
            tap(value => globalUserState = value),
            mapTo(true)
        );
    }
}

const routes: Routes = [
    {
        path: '',
        canActivate: [UserActivator],
        children: [
            {
                // you can define more than one child using different matching rules
                matcher: (url: UrlSegment[]) => {
                    return url.length === 1 && url[0].path === '/' && globalUserState ? ({consumed: url}) : null;
                },
                children: [
                    {
                        // lazy modules must be loaded as children
                        path: '',
                        loadChildren: '../lazy/home/home.module#HomeModule'
                    }
                ]
            },
        ]
    }
];

让globalUserState=false；
类UserActivator实现CanActivate{
公共构造函数（私有用户：UserService）{
}
public canActivate（）：可观察{
返回此.users.isLoggedIn（）管道(
点击（值=>globalUserState=值），
mapTo（真）
);
}
}
常数路由：路由=[
{
路径：“”，
canActivate:[UserActivator]，
儿童：[
{
//可以使用不同的匹配规则定义多个子项
匹配者：（url:URLSEMENT[]）=>{
返回url.length==1&&url[0]。path=='/'&&globalUserState？（{consumered:url}）：null；
},
儿童：[
{
//惰性模块必须作为子模块加载
路径：“”，
loadChildren:“../lazy/home/home.module#HomeModule”
}
]
},
]
}
];