Question

我意识到这很模糊，但是我不知道发生了什么。我试图使用AuthGuard来保护组件，直到有人登录为止。这些组件在不使用AuthGuard时会显示出来，但是一旦我使用AuthGuard子组件，控制台中就不会加载任何东西，也没有错误。

我尝试遵循推荐的其他问题，例如推荐的stackoverflow，但是他们没有类似的问题，并且没有用。

应用路由：

{
  path:"",
  component: ProjectHomeComponent,
  canActivate : [ AuthGuard ],
  children: [
    {
      path: "",
      children: [
        { path: 'view', component: ProjectViewComponent },
        { path: 'seeManage', component: ProjectManageComponent }
      ]
    }
  ]
},

auth.guard：

checkLogin(url: string): boolean {
  if (this.authService.isLoggedIn) { return true; }

  this.authService.redirectUrl = url;

  this.router.navigate(['/login']);
  return false;
}

完整的身份验证防护：

export class AuthGuard implements CanActivate {
constructor(private authService: AuthService, private router: Router) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): boolean {
      let url: string = state.url;

      return this.checkLogin(url);
    }

  checkLogin(url: string): boolean {
    if(document.getElementById('username').innerHTML==""){
      this.authService.redirectUrl = url;

      this.router.navigate(['/login']);

      return true;
    }
    else {
      return false;
    }
  }
}

//got a lot of this from the angular docs so some bits might be unneccessary

我希望使用AuthGuard并登录时能够加载组件，就像不使用AuthGuard一样。什么都没有加载，并且控制台中没有错误。

Answer 1

我假设您忘记了在CanActivateChild中实现auth.guard.ts接口（请参阅here）。

您的auth.guard.ts应该如下所示：

export class AuthGuard implements CanActivateChild{

    canActivateChild(childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
        if (this.authService.isLoggedIn) { return true; }
        this.authService.redirectUrl = state.url;
        this.router.navigate(['/login']);
        return false;
    }
}

AuthGuard不显示组件

1 个答案: