如何获取当前用户 id angular 4？

Question

我必须获取当前用户 ID 才能在我的应用程序的不同部分使用它。

登录.component.ts：

onSignin(form: NgForm){
const UserName = form.value.UserName;
const Password = form.value.Password;
this.authService.signinUser(UserName,Password).map(res => res.json())
 .subscribe(
   data => {
     if (data.Id == 0){
     this.invalid=true;
    }
    else{
      localStorage.setItem('isLoggedin', 'true');
      this.router.navigate(['/calendar']);
      console.log('Ok');
   }})}

auth.service.ts：

signinUser(UserName,Password): Observable<any>{
  return this.http.get('http://api.##.com/api/security/signin?username='+UserName+'&password='+Password);
}

Answer 1

您想要使用从服务调用中获得的用户ID到应用程序中的不同组件。我希望这就是您正在寻找的。

您可以通过三种方法来做到这一点。

1. 共享服务- 使用共享服务将用户 ID 添加到服务中的用户 ID 主题，并在登录时进行设置。下次当用户 ID 更改时，观察组件将收到通知。
2. NGRX - 共享服务的更清晰的实现，如果您的应用程序很大，我建议您使用它。
3. 本地存储——这是非常有争议的，因为它也取决于用户的判断力。在组件之间设置和获取用户 ID。

请注意，如果用户在 NGRX 或共享服务中随时硬刷新页面，数据将会丢失，您可能需要使用本地存储进行完整校对。

Answer 2

您可以从后端传递包含 id 的令牌，也可以使用 redux store 将 id 存储在前端供您的应用程序使用。以下是 Angular 中 ng2 Redux 包的链接。 https://www.npmjs.com/package/ng2-redux 还有一个选项可以将其保存到本地存储中，但我不喜欢它。或者您可以使用会话存储将数据保存在前端，如下所示

保存在登录组件文件中的会话中使用此代码

sessionStorage.setItem('id', data.id);
retrieving from the session//
var data = sessionStorage.getItem('id');
console.log(data) to see the id in the console