Есть сервис Аутификации. Как сделать его общим для всего проекта?

Question

[sdgroup14]

всем привет! Пишу проект на Angular 2+. На данный момент пользуюсь последней версией. Раньше делал легкие проекты и теперь понимаю что делал костыльно. Суть вопроса... Есть к примеру "новостной" портал у него есть блоки header и content. Без Аутификации допустим автор не может отредактировать свою новость и в хедере светится кнопка зайти.
когда залогинился появился карандашик и в хедере его ииконка... Неужели нужно в каждом компоненте из 100 в конструкторе добавлять этот сервис который проверяет мой JWT токен и потом только в onInit чекать что ему показывать.... такоже вопрос по ролям... Неужели нельзя как то внести его 1 раз на весь проект чтоб каждый компонент понимал что нужно изначально проверить токент а потом выдавать по результату? Я ж понимаю аналогичная схема и по локазилации?

Comments

[fdroid]

"аутификация", "локазилация" - это точно термины из Angular?

[alex-1917]

fdroid, это новая версия Ангуляра, версия 991!! мы с вами безнадежно отстали от жизни...

Answer 1

[Ivan Stroykin]

У вас будет AuthGuard, который будет контролировать доступ к разделам и можно написать директиву, которая будет контролировать показ UI на странице. Пусть директива будет называться, к примеру, "hasAuth" и будет иметь такое содержимое:

@Directive({ selector: '[hasAuth]' })
export class HasAuthDirective implements OnInit {
  constructor(private _viewContainer: ViewContainerRef, private _template: TemplateRef<any>) { }

  ngOnInit(): void {
    this._checkAuth(/*ваше определение аутентификации типа boolean*/);
  }

  private _checkAuth(isAuth: boolean): void {
    if (isAuth) {
      this._viewContainer.createEmbeddedView(this._template);
    } else {
      this._viewContainer.clear();
    }
  }
}

И в шаблоне, где нужно показать/скрыть кнопку или другой UI в зависимости от того, прошел ли пользователей аутентификацию, просто добавляем созданную нами директиву:
<button *hasAuth>Редактировать статью</button>

Набросал мини пример - ссылка

Что касается "локализации". Так же нет ничего сложного. Рекомендую использовать ngx-translate. В принципе, там есть вся необходимая информация по вопросам "как этим пользоваться".

Comments

[sdgroup14]

спасибо большое... смысл понял! но у любого пользователя есть доступ к разделам/страница.... AuthGuard я писал на редирект, но по сути логинки нет.... И как мне импортировать на весь проект сервис? возможно ли это задать его глобально?

[Ivan Stroykin]

sdgroup14,

И как мне импортировать на весь проект сервис? возможно ли это задать его глобально?

Какой сервис?
P.S.: не изменяйте комментарий, а пишите новый, иначе уведомление не приходит. Чисто случайно зашел и увидел, что появился вопрос

[sdgroup14]

Ivan Stroykin, ну к примеру страницы Component 1, Component 2, Component 3 и т.д.... и есть Сервис AuthService... Могу ли я как то глобально его внести? чтоб не прописывать каждый раз "constructor(private service: AuthService)" а потом в ngOnInit ... или только так можно?

[Ivan Stroykin]

sdgroup14, Дописал немного пример. я LazyLoading, чтобы было нагляднее - ссылка
Если чего непонятно, спрашивайте

[sdgroup14]

Ivan Stroykin, супер. Начинаю вникать. Спасибо вам большое!