多网站会话管理：React项目共享登录页功能方案咨询

一、不用复制代码的登录组件复用方式 #

• 抽成私有npm包：把你的<Accounts />登录组件单独拎出来做个私有npm包——可以自己搭个Verdaccio私有仓库，或者直接用npm link本地调试。三个React项目都装这个包，然后各自在路由里加个/login指向这个组件就行。以后改登录逻辑，只更改造件包，所有项目同步更新，不用挨个改。
• 独立登录页应用：单独部署一个只放登录组件的小React应用，其他三个项目要登录时直接跳转到这个独立页面。登录成功后，通过URL参数、Cookie或者LocalStorage把登录状态传回原项目，再和Express API校验状态就行。这种方式连每个项目的路由配置都省了，直接跳外部地址。

二、要不要在数据库存会话？ #

看你需求来：

• 简单校验够用来：用JWT就完事。登录成功后Express API返回JWT，前端存在HttpOnly Cookie里（比LocalStorage安全）。每次调API自动带Cookie，后端校验Token合法性就行，不用存会话到数据库，无状态实现，简单快捷。
• 需要会话管控（比如踢人下线、精准控过期）：那就得存数据库。登录成功后生成一个会话ID，把会话ID、用户ID、过期时间、设备信息这些存到MySQL里，同时把会话ID塞到HttpOnly Cookie里。后端每次请求都查数据库校验会话ID是否有效，想让用户下线直接删数据库里的会话记录就行。

三、最省心的组合方案 #

推荐用「JWT+私有组件包」的搭配：

1. 先把<Accounts />抽成私有npm包，三个项目装完后配置路由，直接导入组件用。
2. Express API用JWT生成Token，登录成功后写入HttpOnly Cookie。
3. 每个React项目加个请求拦截器，自动带上Cookie里的Token发请求，后端负责校验。
4. 以后要是需要会话管控，再改成数据库存会话的模式，前端基本不用大改。

内容的提问来源于stack exchange，提问作者Mendrix Manlangit