前端登录凭证存储方案

现在是前后端分离时代，接口登录凭证通常使用cookie，session，web storage来实现，三种方法区别可以阅读cookie、session和localStorage、以及sessionStorage之间的区别，这三种方式都可以用来实现登录凭证的存储，下面针对每种方式来逐一说明

以下的方式前提都是服务器设置了跨域响应头 Access-Control-Allow-Origin

cookie-session机制

传统的方式使用的是cookie结合session来实现，用户登录服务端，服务器会生成一个唯一的sessionId来识别该用户，通过设置成cookie的值传递给客户端，客户端后续的请求通过cookie把sessionId回传服务器，就可以识别该用户对应的session对象。

cookie-session机制的缺点

• 如果浏览器不支持cookie（如大部分手机中的浏览器）或者把cookie禁用了，cookie功能就会失效。
• cookie和session的存储只有4k，大小受到了限制。
• 用户关闭浏览器不会清除Cookie存储的数据

cookie需要注意事项

• 要开启cookie传输，前端ajax请求需要设置 withCredentials: true 请求头，指定这个请求应该发送凭据
• 防止csrf攻击，需要设置 HttpOnly: true 和 SameSite

web Storage机制

web Storage的目的是为了克服由cookie带来的一些限制，当数据需要被严格控制在客户端上时，无须持续地将数据发回服务器。web Storage的两个主要目标是：

• 提供一种在cookie之外存储会话数据的途径。
• 提供一种存储大量可以跨会话存在的数据的机制。

web Storage又分为两种： sessionStorage 和localStorage ，即这两个是Storage的一个实例。从字面意思就可以很清楚的看出来，sessionStorage将数据保存在session中，浏览器关闭也就没了；而localStorage则一直将数据保存在客户端本地。

为了安全起见，一般使用sessionStorage来存储，这样避免用户关闭浏览器导致登录凭证滞留而造成泄露

sessionStorage多tab支持

sessionStorage在同一个tab的情况下，刷新页面或者重新加载不会清除数据，但是本身却无法在多个tab页面共享数据，在新标签或窗口打开一个页面时会在顶级浏览上下文中初始化一个新的会话，意思就是打开一个新的页面，sessionStorage将会是全新的

为了实现多个tab共享登录凭证，可以通过storage event来实现，实现起来很简单

if (!sessionStorage.length) {
  // 新的页面无sessionStorage
  localStorage.setItem('getSessionStorage', Date.now());
};

window.addEventListener('storage', function(event) {
  if (event.key == 'getSessionStorage') {
    // 新的tab想要获取sessionStorage
    localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage));
    localStorage.removeItem('sessionStorage');
  } else if (event.key == 'sessionStorage' && !sessionStorage.length) {
    // 无sessionStorage
    const data = JSON.parse(event.newValue),
    let value;
    for (key in data) {
      sessionStorage.setItem(key, data[key]);
    }
  }
});