`localStorage`

Question

角客户端应用程序正在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());
  }

Answer 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完全相同。

缓存

Cookie有点问题，因为它只是

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

因此它很难维护，因为它只有一个用;分隔的字符串，所以要使用它，最好的选择是第三方库。类似于js-cookies或更多角度友好angular2-cookie;

`HttpInterceptor`

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

在Angular应用程序中存储用户凭据的位置？

1 个答案:

`localStorage`

`sessionStorage`

缓存

`HttpInterceptor`