如何获得当前用户ID angular 4?

时间:2017-10-03 12:56:32

标签: angular typescript userid

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

login.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);
}

2 个答案:

答案 0 :(得分:3)

您可以从包含id的后端传递令牌,也可以使用redux store,它将id存储在前端供应用程序使用。以下是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

答案 1 :(得分:2)

您希望将从服务调用中获得的用户ID用于您应用中的不同组件。我希望这就是你要找的东西。

有三种方法可以做到这一点。

  1. Shared Services - 使用共享服务将userID添加到服务中的用户ID主题,并在登录时进行设置。下次更改用户ID时,将通知观察组件。
  2. NGRX - 一个更清晰的共享服务实现,如果你的应用很庞大,我建议你使用它。
  3. 本地存储 - 这是非常有争议的,因为它也取决于用户的自由裁量权。在组件之间设置并获取用户ID。
  4. 请注意,如果用户在NGRX或共享服务中随时刷新页面,数据将丢失,您可能需要使用本地存储进行完全校对。