用户登录状态存储

一些概念

cookie，存在浏览器
保存位置分2种：内存，硬盘
键值对：name 失效时间（不可读，仅浏览器判断是否过期）
session 会话，存在服务器
session-id
h5 websttorage
localstorage，硬盘，到过期时间/手动清理
sessionstorage，内存

一些方案

方案1 cookie + session-id

存在的问题
问题1 用户名多，服务器占用多
问题2 分布式服务器，session-id 同步

方案2 token + localstorage

服务器端用JWT token，拦截请求验证

过程：

步骤1 浏览器，登录，传 username + password
步骤2 服务器，验证 用户名密码，正确则生成 token，返回给浏览器
步骤3 浏览器，解析出 token，存到localstorage
步骤4 浏览器发其他请求，在 header 加入 token
步骤5 服务器，取出token 验证，成功则正常响应；失败则返回 token 无效
步骤6 浏览器，若收到 token 无效，则跳转到登录页面

参考

• Cookie 、Session、localstorage、Sessionstorage的区别
  https://zhuanlan.zhihu.com/p/622560321
• 【项目小tips】Cookie+SessionID与Token+LocalStorage存储登录状态
  https://blog.csdn.net/weixin_44337386/article/details/126719622
• 前端登陆功能
  https://blog.csdn.net/CaraYQ/article/details/123296318?utm_medium=distribute.pc_relevant.none-task-blog-2_defaultbaidujs_baidulandingword~default-5-123296318-blog-126719622.235^v40pc_relevant_default_base&spm=1001.2101.3001.4242.4&utm_relevant_index=6
• 【HTTP】WebStorage 本地存储 及 验证机制（登录）
  https://www.cnblogs.com/wanglei1900/p/16251817.html
• Angular使用Interceptor(拦截器)请求添加token并统一处理API错误
  https://blog.csdn.net/donjan/article/details/103592341
• 基于Angular 8 的后台管理前端页面,《PHP微服务练兵》系列源码
  https://github.com/donjan-deng/la-manage