Angular Auth Guard 安全路由答案

【问题标题】：Angular Auth Guard secure routesAngular Auth Guard 安全路由
【发布时间】：2019-07-19 04:00:28
【问题描述】：

我正在尝试使用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;
}

【问题讨论】：

反对票是怎么回事？
您正在将 auth-guard 应用于“list-users”，并且如果用户已登录，您将导航到“list-users”，显然它会导致无限循环，有什么问题没有else部分的auth-guard代码的第一个sn-p应该可以工作。
@wolverine 问题是登录用户仍然可以访问登录和注册页面

标签： angular

【解决方案1】：

创建两个服务

anonymous-guard.ts

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

经过身份验证的保护-ts

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] }
];

【讨论】：

【解决方案2】：

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

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

您创建了一个无限循环，因为 this.router.navigate(['list-users']); 递归调用 auth guard，然后依次执行“else”块并将用户导航回 list-users 再次调用 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;
    }

  }
}

【讨论】：

嗯，我需要导入state，因为它未定义。
是的，你需要从'@angular/router'导入RouterStateSnapshot
更好的模式可能是将 /login 和 /signin 封装在单独的模块中（例如，通过 /acc 访问的帐户模块）。然后，您将使用 canLoad 而不是 canActivate 来检查用户是否可以延迟加载该模块。