Как визуализировать компонент, используя * ngIf на основе значения токена?

Question

Я использую https://reqres.in/api/login для создания страницы для аутентификации при входе. Проблема в том, что я хочу отображать элемент панели навигации только после того, как будет выполнен вход в систему. Прежде всего, на элементе панели навигации ничего не должно отображаться. Я определил сервис для входа в систему, который вызывается после нажатия кнопки входа.

public Login(login: Login):
  Observable<any>{
    return this.httpclient.post<any>('https://reqres.in/api/login',login,{responseType:"json"})
    .pipe(map(
      user=>{
        if(user){
            console.log(user)
          this.currentUserName=user;

        }

        return user;
      }
    )

    )
  }

возвращаемое здесь значение пользователя является токеном. и в моем app.component. html я использую условие как

 <li class="navbar-item" *ngIf="loginservice.user == 'QpwL5tke4Pnpja7X4' "> 
      <a class="nav-link" routerLink="dashboard" >Dashboard</a>    
    </li>

Я хочу отобразить панель мониторинга только после того, как будет выполнен вход в систему. Как это можно сделать.

Answer 1

Вы можете использовать следующий подход:

Создайте свойство user в компоненте и попробуйте *ngIf="user".

В LoginService:

public login(login: any) {
return this.httpclient
  .post<any>("https://reqres.in/api/login", login, { responseType: "json" })
}

В компоненте ts :

this.loginService.login(login as any).subscribe(
  user => {
    if (user) {
      console.log(user);
      this.user = user;
      this.currentUserName = user.name;
    }
  },
  error => {
    console.log(error);
  }
);

HTML:

<li class="navbar-item" *ngIf="user"> 
  <a class="nav-link" routerLink="dashboard" >Dashboard</a>    
</li>

Надеюсь, это поможет.