Как получить доступ к имени пользователя во всем приложении, разработанном с использованием angular? - PullRequest
Новая
       57

Как получить доступ к имени пользователя во всем приложении, разработанном с использованием angular?

0 голосов
/ 10 февраля 2020

В настоящее время я работаю с приложением, используя Angular, Express и MySQL. Я хочу извлечь имя пользователя из базы данных и передать его внешнему интерфейсу и получить доступ к нему по всей пользовательской области приложения, когда функция входа пользователя выполняется правильно. Я несколько знаю, что я могу использовать файл service.ts, чтобы сделать это, но я не знаю точно, как это сделать. Можно мне помочь?

Ответы [ 3 ]

1 голос
/ 10 февраля 2020
  1. Создайте AuthService.ts, как вы сказали,
  2. внутри вашего сервиса определите наблюдаемый (может быть BehaviourSubject) тип пользовательской информации
  3. в вашем сервисе API, где вы получите пользователя info вставляет использование AuthService затем в определенную наблюдаемую для обновления всех подписчиков (или вызовов методов, определенных в службе) полученными данными
  4. , внедряет службу в нужные вам компоненты, информация пользователя / профиль
  5. в компонентах подписаться на эту наблюдаемую 
interface UserInfo {
  email: string;
  dob: string;
};

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  UserInfo: BehaviorSubject<UserInfo> = new BehaviorSubject(null);

  updateUserInfo(data: UserInfo) {
    this.UserInfo.next(data);
  }

}

В сервисе API, где вы получаете информацию о пользователе, которую вы вызываете updateInfo с полученными данными (вы должны добавить сервис аутентификации в конструктор сервиса API с помощью модификатор доступа private, protected, publi c, чтобы его вставить angular)

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

export class HeaderComponent implements OnInit {
  u: UserInfo;

  constructor(private authService: AuthService) { }

  ngOnInit() {
    this.authService.UserInfo.subscribe(x=>this.u=x)
  }

}

Теперь вы можете привязаться к полю "u" в компоненте .

Использование наблюдаемой поможет вам обновить всех слушателей / подписчиков (все места, где они используются).

0 голосов
/ 10 февраля 2020

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

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class DataService {

  userName;
  constructor(httpClient:HttpClient) { }

  getUserName(user:string,password:String)
  {
      this.post('...your..api...',{user:user,password:password).pipe(tap(
           res=>{
               if (res==true)
                   this.userName=userName
           }
      ))
  }

}

. Где, я полагаю, у вас есть URL-адрес, который получает в виде post {username: ..., password: ...} и возвращает true, если зарегистрировано, или false, если нет

Все компоненты, которые внедряют эту службу, могут использовать и изменять переменную «userName». Если вы хотите видеть в. html, в конструкторе объявите переменную как publi c

constructor(public dataService:DataService){}

//and in the .html
{{dataService.userName}}
0 голосов
/ 10 февраля 2020

Вы можете использовать сеанс или локальное хранилище

, задавая пользователя: 

let key = 'user'; 
let value = {};
sessionStorage.setItem(key, value);

извлекая пользователя: 

const user= sessionStorage.getItem(key);
...