如何在Angular 2/3/4/5中保持登录状态

我目前在Angular 5应用程序中使用一个令牌（aka session ID），在请求头中将其传递到后端，如下所示：

const headersForJSON: HttpHeaders = new HttpHeaders (
  {
    'Content-Type': 'application/json',
    'Accept': 'application/json'
  }
);

this.headers = headersForJSON.set("Authorization", v.authtoken);

它与每个请求一起使用。如果客户机有一个令牌（即用户已登录），那么我会添加另一个这样的头

const headersForJSON: HttpHeaders = new HttpHeaders (
  {
    'Content-Type': 'application/json',
    'Accept': 'application/json'
  }
);

this.headers = headersForJSON.set("Authorization", v.authtoken);

除非用户重新加载应用程序或在浏览器中手动修改URL，否则此操作将非常有效。此外，如果用户右键单击路由器链接以在应用程序中打开另一个窗口/选项卡

在这些情况下，Angular SPA环境将丢失，authtoken变量未定义，因此没有要发送到后端的内容

---

是否有解决此问题的标准做法？

标准做法是将令牌保存在本地存储中，并在需要时重新使用

当用户登录时，将令牌保存在localstorage中，当用户注销时，将令牌从localstorage中删除

代码

登录后保存到本地存储：

localStorage.setItem('token', Your_token);

在服务器中请求数据时设置标头：

getHeader(){
  let token = localstorage.getItem('token')? localstorage.getItem('token') : null;
  return new HttpHeaders (
    {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
      'token': token
    }
  );
}

用户注销时删除令牌：

localStorage.removeItem('token');

---

如果你能提供一些链接来说明如何实现这一点（例如，一篇很棒的博客文章、Angular library），或者提供一些代码来说明如何做，这对那些没有你经验的人来说将是有益的。感谢你的指针，它帮助我找到了一个解决方案。对于Angular 5，我最终使用了npm包simple-ng5-storage，它可以很好地将对象存储和获取到本地/会话存储。