Блог

У меня есть страница 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.Расположение.href = «dashboard» отлично работает на локальном сервере разработки. Но при размещении на tomcat он не работает. Может ли кто-нибудь предложить решение этой проблемы

Если я правильно понимаю вашу проблему, одним из решений будет подписка на события маршрутизатора и делать все, что вы хотите. Это будет выглядеть так

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

и, конечно, вам нужно будет ввести маршрутизатор, который будет иметь тип маршрутизатора.

 constructor(private router: Router) {}
  

Помимо подхода @hayk, вы даже можете создать BehaviorSubject , на который может быть подписан основной компонент.

Помимо решения вашей проблемы, я бы посоветовал вам реализовать процесс входа в систему как сервис, который будет иметь не только логику входа, но и логику обновления токена (я уверен, что вы также захотите это реализовать)

Преимущество этого заключается в том, что вы можете вызвать метод service не только после входа в систему, но и для различных других сценариев, таких как

1. Проверка токена входа всякий раз, когда вы получаете данные с сервера
2. в промежутках между переключением маршрутов путем подписки на изменения событий в вашем приложении.компонент
3. Используйте CanActivate route guard, если у вас есть некоторые компоненты уровня администратора, чтобы сначала проверить наличие повышенного доступа, а затем активировать маршрут.