我希望当用户未登录时，能够将空路径“”重定向到我的登录页面。因此，我使用守卫和子路由来实现这一点。但是，我的代码对所有路由都有效，除了“”。
当我们尝试访问“http://localhost:4200/”时，Angular会评估路由路径。第一个配置的路由的路径的第一部分是“”，所以让我们继续评估第二部分也是“”，那么就匹配成功了！但是守卫仍然需要验证用户是否可以访问HomeLayoutComponent（如果用户已登录）。如果用户已经登录，则授予访问权限并且用户将看到HomeLayoutComponent（导航栏和HomeComponent在router-outlet中呈现），否则将重定向到“http://localhost:4200/login”。
所以假设我们正在尝试访问“http://localhost:4200/login”。Angular将再次评估路由路径。第一个配置的路由的路径的第一部分是“”，所以让我们继续评估第二部分是“login”，所以我们与之不匹配。我们需要评估下一个配置的路由。再来一次！第一个配置的路由的路径的第一部分是“”（这一次），所以让我们继续评估第二部分是“login”，我们匹配成功了。在这种情况下，将显示LoginLayoutComponent。由于HTML模板中只有一个router-outlet，因此只会显示LoginComponent。
这是我的守卫（canValidate函数）
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):boolean {
return this.canMethod();
}
canMethod () {
if (Environment.ActivateGuard) {
let token = this._auth.getCookie(AuthorizationEnum.cookieName);
if(token) { // token exists
let data = {
token: token,
module: this.module
};
this._auth.validate(data, AuthorizationEnum.Bearer).subscribe(
data => { // valid token
if ( data.res == AuthorizationEnum.emptyResponse) { // invalid user, it doesn't belongs to this module.
this.letsRedirect();
}
else {
let user_role = data.det[1]; // this is the user's role!.
}
},
error => { // other error
this.letsRedirect();
}
);
return true;
}
else { // user don't have token
this.letsRedirect();
}
}
else {
return true;
}
}
letsRedirect(){
window.location.href = Environment.authAppUrl + AuthorizationEnum.redirectQuery + encodeURIComponent(this.url);
}
这是我的app-routing.module.ts文件（仅包含路由数组）
const routes: Routes = [
// TODO: Validar esta ruta
//{ path: '', component: LoginComponent, pathMatch: 'full' },
//Con header
{
path: '',
children: [
{ path: '', component: HomeComponent,canActivate:[AuthorizatedGuard]},
{ path: 'inicio', component: HomeComponent, canActivate:[AuthorizatedGuard] },
{ path: 'categorias', redirectTo: 'base-lista/categorias'},
{ path: 'videos', redirectTo: 'base-lista/videos'},
{ path: 'base-lista/:idList', component: BaseListComponent, canActivate:[AuthorizatedGuard] },
{ path: 'base-lista/categorias/gestionar-categorias', component: CategoryVideoComponent, canActivate:[AuthorizatedGuard] },
{ path: 'base-lista/categorias/ver-detalles-categoria', component: ViewDetailsCategoryComponent, canActivate:[AuthorizatedGuard] },
{ path: 'base-lista/videos/gestionar-videos', component: VideoComponent, canActivate:[AuthorizatedGuard] },
{ path: 'base-lista/videos/ver-detalles-video', component: ViewDetailsVideoComponent, canActivate:[AuthorizatedGuard] },
],
component: AppLayoutComponent,
canActivate: [AuthorizatedGuard],
},
//sin header
{
path: '',
component: LoginComponent,
children: [
{
path: 'login',
component: LoginComponent
}
]
}
];
当我们尝试访问“http://localhost:4200/”时，Angular会评估路由路径。第一个配置的路由的路径的第一部分是“”，所以让我们继续评估第二部分也是“”，那么就匹配成功了！但是守卫仍然需要验证用户是否可以访问HomeLayoutComponent（如果用户已登录）。如果用户已经登录，则授予访问权限并且用户将看到HomeLayoutComponent（导航栏和HomeComponent在router-outlet中呈现），否则将重定向到“http://localhost:4200/login”。
所以假设我们正在尝试访问“http://localhost:4200/login”。Angular将再次评估路由路径。第一个配置的路由的路径的第一部分是“”，所以让我们继续评估第二部分是“login”，所以我们与之不匹配。我们需要评估下一个配置的路由。再来一次！第一个配置的路由的路径的第一部分是“”（这一次），所以让我们继续评估第二部分是“login”，我们匹配成功了。在这种情况下，将显示LoginLayoutComponent。由于HTML模板中只有一个router-outlet，因此只会显示LoginComponent。
那么，我的代码有什么问题吗？