React 应用程序中的 cookie 和安全性

Question

我在 reactJs 中做了一个管理面板，管理着数千人。我想让管理员保持登录状态 30 分钟。使用用户名和密码登录后，服务器发送 userId，我将该 Id 存储在 cookie 中，因为对于每个请求，我都应该在 header 中发送 userId。并且还制作了一个 cookie cookie，显示 session 尚未结束。在 compenentDidMount 上，我设置了一个条件，如果登录 cookie 存在，则使变量为真，如下所示：

if (this.store.cookieExist("4DeHn6")) {
  this.store.changeSession(true);
  this.store.changeId(this.uId);
  else {
    this.store.changeSession(null);
    this.store.changeId(null);
  }

如果 session 打开，则使用 react-router 我呈现页面，否则使用这样的代码将其重定向到登录页面

<Route
                      exact
                      path="/locations"
                      render={() =>
                        !this.store.openSession ? (
                          <Redirect to="/loginPage" />
                        ) : (
                          <Locations />
                        )
                      }
                    />

我正在使用 mobx 进行状态管理。

我唯一做的就是将这两个 cookie 名称变成一个用密码生成器生成的字符串。我真的很担心我的应用程序的安全性，因为我认为如果有人在浏览器中检查我的代码可以找到那两个 cookie 并登录并获取敏感数据。对于项目的第一部分，服务器中没有使用令牌。有没有更好更安全的方式来做到这一点。
感谢任何帮助。

Answer 1

最后，服务器只负责响应具有有效令牌的请求。

在您建立在每个请求中发送的令牌的登录过程后 headers，服务器能够判断令牌是否仍然有效并给您预期的响应或告诉您您不能通过发送 401 Unauthorised 响应来提出该请求。

如果您使用像 axios 这样的中间件来处理您的 http 请求，您可以轻松地 set up an interceptor 处理 401 响应并将您发送到登录页面。像这样：

responseError: error => {
    switch (errorCode) {
      case 401:
          // your logout logic: delete the cookie, and set the session to false
    }
    return Promise.reject(error);
}

这将触发渲染，其中您的 session 为假，将用户重定向到具有您当前逻辑的登录页面。并且还将通过不响应无效或过期的令牌来提高您的应用程序的安全性。

希望对您有所帮助！

Answer 2

我决定使用"cryptr"包来加密我做了这样的事情：

然后加密并加密我的密码并将其用作我的代码中的密码像这样：

const cryptr = new Cryptr("EQqwmBsYQfptNPmHEkjVXSVvJFsE5XbsLFkzMj2WVcDcQHELFTB6JLF35tQfzrf6");

React 应用程序中的 cookie 和安全性

cookie and security in react application

javascript

cookies

reactjs

mobx