Question

我有一个小的webapp。 每个组件都继承自BaseComponent。

BaseComponent在其构造函数上检查用户是否已登录。（向服务器发送请求）。

为了避免dom闪烁，我想暂停模板，直到登录检查完成。

如何在以下构造函数中执行此操作？

由于

export class BaseComponent{
      constructor(protected http : HttpClient, protected tokenService : CsrfTokenService,protected router: Router) {
        http.get( environment.apiServer + "customer/state",{withCredentials  : true}).subscribe((res : any) => {
              console.log("login result", res);
          if(res.logged_in == false && !this.router.url.toLowerCase().includes("login") && !this.router.url.toLowerCase().endsWith("register")){
            this.router.navigate(['/login']);
            console.log("redirecting to login");
          }
        });
       }
    }

Answer 1

我认为解决这个问题的更好方法是使用角度路由，而不是限制所有组件继承的基本组件中的访问（在我看来这不是正确的方式），并限制对基于的特征区域的访问谁是用户。有关此方法的详细信息，请参阅https://angular.io/guide/router#canactivate-requiring-authentication

Answer 2

该方案有几种方法，我认为最简单的方法是将业务转变为模板。我的意思是基类检查用户是否登录，并设置类似userIsLoggedIn的属性，模板检查属性以进行渲染。

<div *ngIf="userIsLoggedIn">
 ...Your page...
</div>

通过这种方式，您可以获得更灵活的用户界面。例如，您可以在等待期间显示消息或Progress Bar等等。

Answer 3

您可以使用路线保护装置来检查路线是否应该被激活。 canActivate是可用于此目的的守卫。以下是参考视频的网址。

https://www.youtube.com/watch?v=DG1lbuu8wt4

Angular 4阻止模板加载，仅在特定事件之后

3 个答案: