【问题标题】：Where to store the user credentials in an Angular application?在 Angular 应用程序中将用户凭据存储在哪里？
【发布时间】：2017-12-17 14:01:38
【问题描述】：

Angular 客户端应用程序正在http://localhost:4200 上运行

它与在http://localhost:8080 上运行的基于 Spring 的 Restful API 进行通信后端的身份验证机制是http basic，对于每个请求，Spring 内部都会调用一个过滤器来检查用户登录时从 Angular 客户端传递来的凭据的真实性。

当用户登录时，他/她的凭据被编码为Base64.encodeBase64 并设置到Authorization 标头中。

private getHeaders(){

    let headers = new Headers();
    headers.append('Accept', 'application/json');
    headers.append('Content-Type', 'application/json');
    headers.append('Authorization','Basic ' + btoa("bill:abc123"));
    return headers;
}

btoa 函数用于设置Authorization 标头。这很好用，TLS/ HTTPS 将用于加密凭据以安全地通过网络传递。

对于后续请求，我每次都需要传递相同的凭据。那么，一旦他/她成功登录以进行后续请求，我应该将用户凭据存储在哪里？

例如这个请求：

addEmployee( employee : Employee ) : Observable<Response> {
      return this.http.post('http://localhost:8080/employee/', JSON.stringify(employee),
            {headers: this.getHeaders()}).map(res => res.json());
  }

【问题讨论】：

一个 cookie 或 LocalStorage。但是存储密码确实不是一个好主意。令牌（例如 JWT 令牌或会话令牌）会更安全。
@JBNizet：但是后端的http基本认证机制每次都需要用户名和密码。
嗯...改变后端。
不，不一定。您可以继续支持它，并支持额外的基于令牌的机制。
使用服务获取用户凭据UserService，将其存储在本地存储或内存中，但是您不能将密码存储为纯文本原因。创建HttpInterceptor为所有请求添加header，并使用拦截器中的用户服务获取token。

标签： angular

【解决方案1】：

关于存储你有3种方式。

`localStorage`

localStorage 存储key 和一个字符串value。关闭浏览器后不会被擦除。

// setting new item
localStorage.setItem('MyApp_Auth', JSON.stringify(obj));

// getting item
let auth;
if (localStorage.getItem('MyApp_Auth')
   auth = localStorage.getItem('MyApp_Auth');

// removing
localStorage.removeItem('MyApp_Auth');

// clear all data
localStorage.clear();

`sessionStorage`

sessionStorage 与localStorage 类似，但它的数据仅在会话未关闭时才会保留。用法与localStorage完全相同。

Cookies

Cookie 有点问题，因为它只是

document.cookies = "username=John Doe; expires=Thu, 01 Jan 1970 00:00:00 UTC";

所以很难维护，因为它只有一个用; 分隔的字符串，所以使用它最好的选择是 3rd 方库。 js-cookies 之类的东西或对角度更友好的 angular2-cookie；

`HttpInterceptor`

从 Angular 第 4 版开始，您可以实现 HttpInterceptor，在其中您可以自动将 headers 添加到每个 request。欲了解更多信息，请阅读Authenticaion using the HttpClient and HttpInterceptors。

【讨论】：