如何在 React/Express 应用程序中实现可选身份验证？

Posted 2023-02-22

【中文标题】如何在 React/Express 应用程序中实现可选身份验证？

【英文标题】：How to implement optional authentication in React/Express app?

【发布时间】：2021-12-14 00:45:54

【问题描述】：

我正在构建自托管的书签管理器应用。我在前端使用 React，在后端使用 Express。我已经实现了基于 JWT 的普通认证系统。但现在我想让身份验证成为可选的。因为它是自托管的应用程序，有些用户可能只想在本地网络上使用它=禁用身份验证，而其他人将其暴露给互联网=启用身份验证。

在后端，我使用环境变量 USE_AUTH=false 禁用身份验证，一切正常。

然而，在前端，我基于 AuthContext 状态中存储的 isAuthenticated 值呈现一些组件和路由。成功登录/注册时设置为 true，注销时设置为 false。

我的问题是如何告诉我的 React 前端我没有在后端使用身份验证，以便它可以呈现所有隐藏的组件，不包括请求的令牌等？

我想出的唯一解决方案是在用户打开应用程序以询问服务器是否使用身份验证时发送请求。所以像GET /api/auth/ping 这样的东西会根据USE_AUTH 的值返回 useAuth: true 或 useAuth: false 。

但是我不知道这是否是最佳解决方案。我可以使用更好的选择/模式吗？

谢谢

【参考方案1】：

我相信正确的做法是在你的 react 应用程序中指定哪些路由是私有的，哪些是公共的，根据具体情况，组件将被渲染。