Question

在登录仪表板加载到页面后，我有了一个Angular页面。我在应用程序组件中有标头，并且从浏览器的本地存储中加载了一些详细信息。但是在路由到仪表板之后，由于我已经为标题图标设置了ngIf条件，因此未加载标题图标，如下所示

<button
      *ngIf="isLoggedIn == 'true'"
      mat-icon-button
      (click)="snav.toggle()"
    >
      <mat-icon style="color:white;">menu</mat-icon>
    </button>

如果本地存储LoggedIn值为true，则仅此按钮可见。

但是在我的情况下，在我的登录组件中点击了登录按钮后，它调用了一项服务，并从那里设置了本地存储值。

if (res1["retFlag"] === "0") {
            this.http
              .post("http://213.136.79.138:8080/gdp/login", obj, httpOptions)
              .subscribe(
                res => {
                  console.log(res);
                  // console.log('userid' + '' + res['userid']);

                  // tslint:disable-next-line:no-string-literal
                  if (res["returnFlag"] === 0) {
                    // tslint:disable-next-line:no-string-literal
                    const userid = res["loginEmployeeId"];
                    const username = res["username"];
                    localStorage.setItem("userid", userid);
                    localStorage.setItem("isLoggedIn", "true");
                    localStorage.setItem("username", username);
                    console.log(username);
                    // console.log('signed in log val:' + localStorage.getItem('isLoggedIn'));

                    //window.location.href = "./dashboard";

                    //this.router.navigate(["dashboard"]);

                    // var url = '@Url.Action("Action", "/dashboard")';
                    // window.location.href = url;

                    this.router.navigateByUrl("dashboard");

                    // this.router.navigate(['dashboard']);
                  } else {
                    alert("Username or Password Incorrect");
                  }
                },
                err => {
                  // this.loading = false;
                  console.log(err);
                }
              );
          } else {
            alert("UserName Not Available");
          }
        },
        err => {
          // this.loading = false;
          console.log(err);
        }
      );

但是问题是重定向后标题没有刷新。

如果我使用 window.location.href =“仪表板” ，则可以在本地开发服务器上正常工作。但是当托管到tomcat时，它不起作用。有人可以提出解决这个问题的方法

Answer 1

在@hayk的方法之上，您甚至可以创建一个BehaviorSubject，它可以由主要组件订阅。

除了解决问题的方法外，我建议您将登录过程作为一种服务来实现，该服务不仅具有登录逻辑，而且还具有令牌刷新逻辑（我相信您也希望实现该功能））

这样做的好处是，您不仅可以在登录后调用服务方法，还可以在各种其他情况下调用

每当从服务器获取数据时都要验证登录令牌
通过订阅app.component中的事件更改在切换路线之间
如果您有一些管理员级别的组件，请首先使用CanActivate路由防护，以检查提升的访问权限，然后激活路由。

Answer 2

如果我正确理解了您的问题，则解决方案之一就是订阅路由器事件并执行您想做的所有事情。看起来像这样

this.router.events.subscribe(val => {
    // do what you want
    // ...
});

当然，您需要注入将具有路由器类型的路由器。

constructor(private router: Router) {}

重定向到另一个页面Angular 7后如何重新加载主要组件

2 个答案: