ngIf пользователь вошел в шоу компонент

Question

Я создаю приложение, которое должно быть доступно для пользователей без учетной записи, но как только кто-то создает учетную запись, ему необходимо видеть дополнительные функции, и оно также должно реагировать.

Для отзывчивости я использую дизайн материала для начальной загрузки и угловой материал mdbootstrap . В приведенном ниже примере я хотел бы изменить размер mdb-col с 9 на 12 в зависимости от того, вошел ли пользователь в систему или нет и, следовательно, не отображать сохранение ... ... option (s).

<div>
  <div class="row ">
    <div class="col-lg-9 col-md-8 col-sm-6 ">
      <div class="row  ">
        <div class="col-md-12 mb-12">
          <div class="card testimonial-card  ">
            <div class="card-up lighten-1 ">
              <div class="card-body">
                <h4 class="card-title">{{ dare.title }}</h4>
                <hr />
                <p>{{ dare.description }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6"><!--this shouldn't be displayed when someone is not logged in-->
      <div class="row">
        <div class="col-12">
          <button mat-raised-button class="btn btn-block">
            Save
          </button>
        </div>
      </div>

      <br />

      <div class="row">
        <div class="col-12">
          <button mat-raised-button class="btn btn-block">
            Challenge someone else
          </button>
        </div>
      </div>

      <br />

      <div class="row">
        <div class="col-12">
          <button mat-raised-button class="btn btn-block">
            Create new ...
          </button>
        </div>
      </div>
    </div>
  </div>
  <br />
</div>

Я ожидаю увидеть варианты только тогда, когда кто-то вошел в систему и соответственно изменяется скорость отклика.

Заранее спасибо!

Answer 1

Вы должны использовать Guards в своем проекте, пример в документации: https://angular.io/api/router/CanActivate

Для достижения этого вам необходимо реализовать два компонента (один для аутентифицированного пользователя, другой для не аутентифицированного пользователя).Определите маршрут, например:

{
    path: '',
    component: AuthenticatedUserComponent,
    canActivate: [AuthenticatedUserGuard]
},
{
    path: '',
    component: UnauthenticatedUserComponent
}

, а затем определите охрану:

@Injectable()
class AuthenticatedUserGuard implements CanActivate {

   canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree {
      return true; // here you should call a method from service, that 
                   // that holds whether user is authenticated or not 
    }
}