角钢护卫安全路线

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

创建两个服务

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

Answer 2

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

您只需检查用户是否正在访问/login或/signup路由(无论您如何命名它)。

您已经创建了一个无限循环，因为this.router.navigate(['list-users']);递归地调用auth保护，它依次执行“users”块，并将用户导航回列表用户，该列表用户再次调用auth保护等等。

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

  }
}