一些概念
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-2defaultbaidujs_baidulandingword~default-5-123296318-blog-126719622.235v40pc_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