【问题标题】：React - Storing Token received from serverReact - 存储从服务器收到的令牌
【发布时间】：2021-10-02 09:59:04
【问题描述】：

这更有可能是概念问题。我正在做网站的前端，并且已经从另一个人那里创建了后端。他的端点之一是“登录端点”，它向我发送了几条回复：

令牌 (JWT)
用户ID
姓名
地址
公司

（和其他一些人）

我在登录后直接收到所有这些作为响应。所以我想知道哪种方法是拯救它们的最佳方法？我们可以假设将除 Token 之外的所有内容保存在 localStorage 或带有 js-cookies 包的 cookie 中都不是问题，但是如何存储令牌？同时存储在本地/会话存储和 cookie 中是不安全的。目前我有存储所有这些的 Auth 上下文：

import React from "react";

export default React.createContext({
  token: null,
  userId: null,
  address: null,
  firstName: null,
  lastName: null,
  email: null,
  company: null,
  subscription: null,
  login: (token, guid) => {},
  logout: () => {},
});

登录后我传入

<AuthApi.Provider
        value={{
          token,
          guid,
          login,
          logout,
          address,
          firstName,
          lastName,
          email,
          company,
          subscription,
        }}
      >

在 App.js 中，因此可以使用 useContext 从项目内的所有组件访问它们。

如您所知，刷新浏览器时，我们会丢失所有值。所以基本上在这里我不会将值和 Token 也存储在 cookie 或本地/会话存储中，但我在刷新后会丢失它。如果我无法在后端进行更改，这里最好的解决方案是什么？

【问题讨论】：

您是否在后端验证令牌？令牌会过期吗？代币可以撤销吗？来自身份验证提供者的各种工具将令牌存储在 localStorage 中。您对将其存储在那里有什么特别的担忧？当发出任何请求时，令牌也是“可见的”，您可以真正隐藏它。
@AlexanderStaroselsky 是的，当我提出请求时，令牌会在后端得到验证。所以基本上我在授权标头中放了一个令牌。
这是一个非常基于意见的问题。您需要决定如何处理令牌，无论是会话/本地存储还是 cookie。然后你需要实现它，如果你有问题/错误，你可以更新问题来解决这些问题。

标签： javascript reactjs jwt local-storage token

【解决方案1】：

在 React 中使用 Redux 及其 Redux Persist。通过使用这些库，令牌不会在页面刷新时消失。而且您不需要将 AUTH 令牌传递给子组件，因为通过将 Token 作为状态存储在 redux 中它可以在所有组件中访问。

【讨论】：

我认为 redux 也很容易从浏览器中看到或者我错了？
你可以通过只为生产添加一个 if 来隐藏它
查看这个答案：stackoverflow.com/questions/60909402/…

【解决方案2】：

如果您希望能够随时撤销令牌，您可以将其存储在 Redis 中。它比每次查询数据库都要快，所以它是一个很好的折衷方案。您可以查看此答案以获取更多详细信息Should I store JWT tokens in redis?

【讨论】：

【解决方案3】：

对我而言，最好的方法是创建双重令牌授权（访问和刷新令牌），将令牌存储在 LocalStorage 中，然后通过延迟或请求刷新令牌。只需要求您的后端开发人员添加一条用于令牌刷新的路线。为了刷新，您可以使用 axios 拦截器。

Refresh token functionality in React application using redux and redux-saga

【讨论】：

我故意写了最后一句话——“如果我不能在后端进行更改，这里最好的解决方案是什么？”。如果我可以在后端进行更改，我非常了解解决方案

【解决方案4】：

你的问题太笼统了，不知道这些细节是无法回答的

要考虑的问题

前端是否与不同的域或服务器通信？
基于令牌，您是否在前端做任何工作？（例如：管理像 isLoggedIn 这样的状态）。请记住，其他数据可以缓存在本地存储中，并且可以在重新验证技术时使用陈旧。
如果角色或名称或其他任何内容发生更改，令牌是否会过期？（例如，firebase 中的自定义声明就是一个典型的例子）
您的服务器是否可以控制授权服务器，或者您正在使用第三方服务器，如 okta、firebase 或其他服务器？（如果第三方可以接受他们的建议，除非您知道自己在做什么）
如果您在后端禁用帐户，前端如何知道并注销？（长期存在的应用程序包括电子或浏览器扩展程序或本机应用程序，或者在我的情况下是 youtube，我不记得我之前关闭的时间）

最后一点

Cookie 比您想象的更强大。对于 XSS 攻击，仅启用 HTTPS。但这只是山的一角。它有很多标志来源、相同站点、域、安全标志、仅 HTTP、到期等。

简而言之就是！== userInfo.你不能以类似的方式对待两者。

【讨论】：