Angular 2:无法在存储在本地商店中的另一个组件中获得令牌

Question

我有一个应用程序，其中包括登录和家庭组件，

login.service.ts

  let body = JSON.stringify(data);
    console.log("logged in user",body);
    return this._http.post('http://localhost:8080/api/user/authenticate', body, { headers: contentHeaders })
    .map(res => res.json())
    .map((res) => {
        var token1:any = res;
        console.log(token1);
        if (token1.success) {
          localStorage.setItem('auth_token', token1.token);
          this.LoggedIn = true;
        }
        return res.success;
      });
}
isLoggedIn() {
    return this.LoggedIn;
  }

在此服务中

constructor(private _http: Http) {
  this.LoggedIn = !!localStorage.getItem('auth_token'); }

login.component.ts

login(event, username, password) 
   {
    this.loginService.login(username, password)
    .subscribe(
      response => {
        this.router.navigate(['/home']);
        alert("login successfull");
      },
       error => {
          alert(error.text());
          console.log(error.text());
        }
    );

从此登录中，我能够对其进行身份验证，并将其路由到家庭组件，

home.serice.ts

getClientList()
   {
     let headers = new Headers();
     headers.append('Content-Type', 'application/json');
     let authToken = localStorage.getItem('auth_token');
     headers.append('X-auth-Token', 'authToken')
      return this._http.get('http://localhost:8080/api/v1/client/list?isClient=Y', {headers})
      .map(res => res.json())
   }

home.component.ts

 onTestGet()
    { 
          this._httpService.getClientList()
          .subscribe(
            data => this.getData = JSON.stringify(data),
            error => alert(error),
             () => console.log("finished")

     );
  }

现在的问题是，我如何访问token1 varbible（登录）中的家庭组件中的令牌，我累了getItem token。但是我要获得token null.please。

预先感谢

Answer 1

localStorage.getItem('auth_token')

这应该可以起作用，但是您的数据是无效的，因为数据的生命周期不同。

我建议您为此目的使用主题构造，尤其是您已经提供了数据。

示例：

loginInfo$ = new Subject();
private _logininfo = null;
getLoginData () {
    if(!_logininfo) {
         this.http..... { this._loginInfo = data; 
                          this.loginInfo$.next(data); }
         return this.loginInfo$.first()
    }
    else return Observable.of(this._logininfo);
}

所以，现在，您的服务同时存储数据和处理程序缺少登录。