如何在Rails与React.js技术栈中实现安全的静默身份认证

现有实现问题说明 #

你当前在前端硬编码固定账号密码请求token的方式属于严重安全漏洞，任何人打开前端控制台查看源码或网络请求就能拿到完整凭证，可直接调用你所有后端接口，必须首先移除该逻辑。

后端改造步骤 #

• 拆分接口权限：把路由分为公开只读接口和管理后台接口两组，原来的before_action :check_login只作用于管理后台接口，公开接口单独加轻量化鉴权逻辑。
• 新增匿名token生成接口：不需要鉴权即可调用，返回的token仅绑定只读公开数据的权限，有效期建议设为7天，接口配置请求频率限制，避免被恶意刷取。
• 新增token刷新接口：仅对已登录的管理用户开放，用于用有效refresh_token兑换新的access_token。
• 双token逻辑：管理用户登录成功后，同时返回15分钟有效期的access_token和7天有效期的refresh_token，两个token都通过HttpOnly、Secure、SameSite=Strict属性的Cookie返回，避免前端XSS攻击窃取。

前端改造步骤 #

公开页面（/home、/about等）逻辑 #

• 删除现有硬编码的邮箱、密码凭证代码，避免凭证泄露。
• 应用初始化时，先检查本地存储中是否存在未过期的匿名token：
  • 存在则直接携带token调用公开接口
  • 不存在则调用匿名token接口获取新的token，存储到本地后再发起数据请求
• 所有公开接口请求都在请求头携带匿名token，后端校验权限后仅返回公开数据。

管理后台静默登录逻辑 #

• 封装axios请求拦截器，所有管理接口请求自动携带Cookie中的access_token。
• 封装axios响应拦截器，捕获后端返回的401状态码：
  • 首先自动调用refresh_token接口兑换新的access_token，兑换成功后自动重试之前失败的请求，整个过程用户无感知
  • 如果refresh_token也过期失效，再跳转至/login登录页，要求用户手动登录

额外安全规范 #

• 全链路启用HTTPS，避免token在传输过程中被中间人窃取。
• 后端CORS配置仅放行你的前端业务域名，禁止使用*通配符。
• 匿名token和管理用户token做严格的权限隔离，禁止匿名token访问任何管理接口、执行任何写操作。
• 所有token相关接口都配置频率限制，避免暴力破解风险。

内容的提问来源于stack exchange，提问作者elhirach abderrazzak