Question

我正在尝试使用auth-guard保护我的路线。

我的问题是用户是否登录。用户无法去登录/注册页面，必须将用户重定向到默认页面。

routing.module.ts

const routes: Routes = [
 { path: '', component: LoginComponent },
 { path: 'signup', component: SignupComponent },
 { path: 'list-users', component: ListUsersComponent, canActivate: 
 [AuthGuardService] }
];

auth.guard.ts

if (!this.authService.isLoggedIn()) {
  this.router.navigate(['/']);
  console.log('go to login');
  return false;
}
console.log('has access');
return true;

我试图使代码看起来像这样，但是出现了无限循环。

if (!this.authService.isLoggedIn()) {
  this.router.navigate(['/']);
  console.log('go to login');
  return false;
} else {
  console.log('redirect when loggedin to list-users');
  this.router.navigate(['list-users']); // infinite loop
  return true;
}

Answer 1

我的问题是用户是否登录。用户无法去登录/注册页面，必须将用户重定向到默认页面。

您可以简单地检查用户是否正在访问/ login或/ signup路由（无论您如何命名）。

您创建了一个无限循环，因为 this.router.navigate(['list-users']);递归调用auth Guard，后者依次执行“ else”块并将用户导航回列表用户，从而再次调用auth-guard，依此类推。

AuthGuard.ts

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot){
  if (!this.authService.isLoggedIn()) { //user is not logged in
    this.router.navigate(['/']); //go to login
    return false;
  } else { //user is logged in

    if(state.url.indexOf("/login") > 0 || state.url.indexOf("/signup") > 0 ){ //check if logged in user is accessing /login or /signup path
      this.router.navigate('['list-users']');
      return false;
    }else{
      return true;
    }

  }
}

Answer 2

创建两个服务

anonymous-guard.ts

if (!this.authService.isLoggedIn()) {
 this.router.navigate(['/']);
 return false;
} else {
 return true;
}

经过身份验证的护卫队

if (this.authService.isLoggedIn()) {
   this.router.navigate(['list-users']);
   return false;
} else {
   retrun true;
}

然后将其应用于路线

const routes: Routes = [
 { path: '', component: LoginComponent,canActivate: 
 [AuthenticatedGuardService] },
 { path: 'signup', component: SignupComponent,canActivate: 
 [AuthenticatedGuardService] },
 { path: 'list-users', component: ListUsersComponent, canActivate: 
 [AnonymousGuardService] }
];

Angular Auth Guard安全路由

2 个答案: