在加载未登录的组件时卡住
Gets stuck loading a component that isn't logged in
我在用户未登录时重定向时遇到问题。在我的项目中,我有两个 Guards 用于管理员和用户,然后我使用@angular/fire/auth-guard 库的功能在登录时进行重定向在,如果不是。问题是如果我添加我自己创建的守卫,检查你是否登录的每个组件的守卫停止工作,这会保持页面加载并且永远不会结束,而不是我的工作。这是我的代码示例:
在这段代码中,我同时让 RolUserGuard 和 RoleAdminGuard 工作,但是 home 和 admin 的 AuthGuard 不工作,他们在加载时被抓到而没有返回登录页面。相反,如果您已登录并尝试重定向到登录页面,AuthGuard 会起作用。
const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(['']);
const redirectLoggedInToHome = () => redirectLoggedInTo(['home']);
const routes : Routes = [
{path : '',redirectTo: 'login', pathMatch: 'full'},
{path : 'login', component : LoginComponent, canActivate: [AuthGuard], data: {authGuardPipe: redirectLoggedInToHome}},
{path : 'home', component : HomeComponent, canActivate: [AuthGuard,RoleUserGuard], data: {authGuardPipe: redirectUnauthorizedToLogin} },
{path : 'admin', component : AdminComponent, canActivate: [AuthGuard,RoleAdminGuard], data: {authGuardPipe: redirectUnauthorizedToLogin}, children:[
{path : '', component : AdminUsersComponent},
{path : 'user/:id', component: DetailsComponent}
]},
{path : '**', component: PageNotFoundComponent}
]
我是不是做错了什么?可能是因为数据 属性 并且在添加第二个 Guard 时它没有正确检测到它?有什么帮助
我把其他守卫的代码留给你,虽然实际上是一样的,只是它改变了而不是用户的 amin,反之亦然。
canActivate( route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
const rol = localStorage.getItem('rolUser');
if(rol!=='admin'){
this.router.navigate(['/home']);
return false;
}
return true;
}
我针对这种情况的解决方案是,删除 authGurad 并在每个守卫中使用 UserService 来检查用户是否已登录:
RoleAdminGuard:
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
const isLoggedIn = this.userService.isLoggedIn();
if (!isLoggedIn) {
this.router.navigate(['/login']);
return false;
}
const rol = localStorage.getItem('rolUser');
if (rol !== 'admin'){
this.router.navigate(['/home']);
return false;
}
return true;
}
并且你应该对具有不同条件(角色)的 RoleUserGuard 做同样的事情。
或
我们可以在 UserService 中像这样使用用户字典。
用户服务:
userAccess= {
home: 'user',
admin: 'admin'
}
并且只使用一名守卫 (RoleGuard)
角色守卫:
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
const isLoggedIn = this.userService.isLoggedIn();
if (!isLoggedIn) {
this.router.navigate(['/login']);
return false;
}
const rol = localStorage.getItem('rolUser');
const userAccess = this.userService.userAccess[next.url]
if (rol !== userAccess) {
const navigateTo = rol === 'admin' ? '/admin' : '/home';
this.router.navigate([navigateTo]);
return false;
}
return true;
}
希望对你有所帮助。
我在用户未登录时重定向时遇到问题。在我的项目中,我有两个 Guards 用于管理员和用户,然后我使用@angular/fire/auth-guard 库的功能在登录时进行重定向在,如果不是。问题是如果我添加我自己创建的守卫,检查你是否登录的每个组件的守卫停止工作,这会保持页面加载并且永远不会结束,而不是我的工作。这是我的代码示例:
在这段代码中,我同时让 RolUserGuard 和 RoleAdminGuard 工作,但是 home 和 admin 的 AuthGuard 不工作,他们在加载时被抓到而没有返回登录页面。相反,如果您已登录并尝试重定向到登录页面,AuthGuard 会起作用。
const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(['']);
const redirectLoggedInToHome = () => redirectLoggedInTo(['home']);
const routes : Routes = [
{path : '',redirectTo: 'login', pathMatch: 'full'},
{path : 'login', component : LoginComponent, canActivate: [AuthGuard], data: {authGuardPipe: redirectLoggedInToHome}},
{path : 'home', component : HomeComponent, canActivate: [AuthGuard,RoleUserGuard], data: {authGuardPipe: redirectUnauthorizedToLogin} },
{path : 'admin', component : AdminComponent, canActivate: [AuthGuard,RoleAdminGuard], data: {authGuardPipe: redirectUnauthorizedToLogin}, children:[
{path : '', component : AdminUsersComponent},
{path : 'user/:id', component: DetailsComponent}
]},
{path : '**', component: PageNotFoundComponent}
]
我是不是做错了什么?可能是因为数据 属性 并且在添加第二个 Guard 时它没有正确检测到它?有什么帮助
我把其他守卫的代码留给你,虽然实际上是一样的,只是它改变了而不是用户的 amin,反之亦然。
canActivate( route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
const rol = localStorage.getItem('rolUser');
if(rol!=='admin'){
this.router.navigate(['/home']);
return false;
}
return true;
}
我针对这种情况的解决方案是,删除 authGurad 并在每个守卫中使用 UserService 来检查用户是否已登录:
RoleAdminGuard:
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
const isLoggedIn = this.userService.isLoggedIn();
if (!isLoggedIn) {
this.router.navigate(['/login']);
return false;
}
const rol = localStorage.getItem('rolUser');
if (rol !== 'admin'){
this.router.navigate(['/home']);
return false;
}
return true;
}
并且你应该对具有不同条件(角色)的 RoleUserGuard 做同样的事情。
或
我们可以在 UserService 中像这样使用用户字典。
用户服务:
userAccess= {
home: 'user',
admin: 'admin'
}
并且只使用一名守卫 (RoleGuard)
角色守卫:
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
const isLoggedIn = this.userService.isLoggedIn();
if (!isLoggedIn) {
this.router.navigate(['/login']);
return false;
}
const rol = localStorage.getItem('rolUser');
const userAccess = this.userService.userAccess[next.url]
if (rol !== userAccess) {
const navigateTo = rol === 'admin' ? '/admin' : '/home';
this.router.navigate([navigateTo]);
return false;
}
return true;
}
希望对你有所帮助。