angular - 将空路径重定向到登录页面(Angular 4)
问题描述
当用户未登录时,我想从空路径“”重定向到我的登录页面。所以我使用警卫和子路由来执行此操作。但是,我的代码适用于除“”之外的所有路线。
这是我的后卫(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
}
]
}
];
当我们尝试访问“htpp://localhost:4200/”时,Angular 将评估路由路径。配置的第一个路由的路径的第一部分是“”,所以让我们继续评估也是“”的第二部分,所以我们有一个匹配!但是守卫仍然需要验证用户是否可以访问 HomeLayoutComponent(如果用户已登录)。如果用户已登录,则授予访问权限,用户将看到 HomeLayoutComponent(导航栏和 HomeComponent 在路由器出口中呈现),否则将重定向到“htpp://localhost:4200/login ”。
所以假设我们正在尝试访问“htpp://localhost:4200/login”。Angular 将再次评估路由路径。配置的第一个路由的路径的第一部分是“”,所以让我们继续评估第二部分“登录”,所以我们没有匹配。我们需要评估配置的下一个路由。我们再来一次吧!配置的第一个路由的路径的第一部分是“”(这次),所以让我们继续评估第二部分“登录”,我们有一个匹配。在这种情况下,将显示 LoginLayoutComponent。由于 HTML 模板中只有一个 router-outlet,因此只会显示 LoginComponent。
所以..我的代码有什么问题?
解决方案
这对我有用
[
{
path: '',
pathMatch: 'full',
redirectTo: 'teams'
},
{
path: 'teams',
component: TeamsComponent
}
]
参考 - http://vsavkin.tumblr.com/post/146722301646/angular-router-empty-paths-componentless-routes
推荐阅读
- python - 使用地图创建新列时处理 PerformanceWarning
- reactjs - 如何将 Bootstrap react Header 中的 Nav.Link 移动到右侧?
- c - 编译为 FDPIC ELF 时出现分段错误
- c - 如何在宏函数中增加数字并转换为字符串?
- reactjs - 如何更改应用程序中特定文件夹的 tsconfig 属性?
- javascript - 矩阵的猫鼬种群
- php - 如何使用 ajax 将正确的 ID 发送到控制器?
- webserver - 使用从其文档中获取的 Vert.x Web 代理代码的 404 错误
- node.js - Node express 服务器在部署在 heroku 上后停止返回 json 对象
- node.js - 正在更新具有非必需嵌套对象字段的文档时出现 Mongoose ValidationError