为 React Router 使用单例是否安全？答案

【问题标题】：Is using singleton for React Router secure?为 React Router 使用单例是否安全？
【发布时间】：2020-05-12 03:43:04
【问题描述】：

我使用react-router-dom 在只有几页的 React webapp 上进行路由。如果用户尚未使用 OAuth2 登录他们的 Google 帐户，我想阻止他们访问某些页面，所以我想像这样使用 ProtectedRoute 组件：

<BrowserRouter>
  <Switch>
    <Route path="/login" component={SignIn}/>
    <ProtectedRoute path="/home" component={Home} />
  </Switch>
</BrowserRouter>

我看到很多教程都推荐使用单例，例如通过组件树传递的全局变量、上下文或类实例来检查登录状态。有人不能直接进入开发人员工具并更改上下文吗？前任。将isLoggedIn:false 更改为true。

我正在使用socket.io 的全局实例进行服务器连接，因此重新加载页面并不理想。如果您离开页面并返回，Express 后端服务器会存储一个 JWT 以供验证。

谢谢！

【问题讨论】：

标签： javascript reactjs authentication oauth-2.0 jwt

【解决方案1】：

不存在受保护的路由以安全地阻止客户端访问这些页面。受保护的路由以用户界面模式的形式存在，通常防止用户看到或访问某些 UI，除非他们已登录和/或授权。

如果您依靠 JavaScript 布尔标志来阻止用户访问私人信息或管理控制面板，那么这是非常不安全的，而且您做错了。您的应用的实际安全性应由服务器和 JWT 处理。每个可能涉及敏感信息或操作的服务器或 API 请求都应使用安全令牌进行身份验证。这样，即使用户恶意（或什至错误地）将其isAdmin 标志设置为true 并访问mywebsite.com/admin，他们也无法执行或查看任何敏感信息，因为他们不这样做'没有正确的身份验证令牌来对 mywebsite.com/api/getSecretUserList 或其他任何东西执行 GET 请求。也许他们可以强行前往mywebsite.com/admin，但那又怎样？他们只会看到错误、空白页或其他任何内容，因为特权网络请求（应该）失败。

【讨论】：