将 JWT 临时存储在反应本机变量中是否安全？答案

【问题标题】：Is it safe to temporarily store JWT in react native variable?将 JWT 临时存储在反应本机变量中是否安全？
【发布时间】：2021-11-29 08:35:19
【问题描述】：

我目前正在使用 react-native-secure-storage 为我的用户存储 JWT。该应用程序从 Express API 检索数据，因此在发出 HTTP 请求时，我从安全存储中检索令牌，并且当异步函数完成时，将令牌发送到 API。我现在遇到了一个问题，我想制作一个包含从 API 提供的图像的组件，但是我无法在异步函数中获取 JWT，因为该组件需要立即返回。我的问题是我可以将 JWT 暂时存储在变量或组件状态中吗？

【问题讨论】：

是的，你可以这样做

标签： reactjs react-native jwt

【解决方案1】：

是的，您可以将其存储在变量、上下文或状态中。我建议使用 React.context() 来传播您的 JWT 令牌。

例子：

const JwtStuffContext =  React.createContext({
    jwt: null,
});

const YourApp = () => {
    const theToken = 'abc';
    return <JwtStuffContext.Provider  value={{ jwt: theToken }}>
        {/** The rest of your app, or {children} */}
    </JwtStuffContext.Provider>
}

const SomewhereDownTheReactTree = () => {
    const { jwt } = useContext(JwtStuffContext);
}

请注意，如果您想避免直接与整个应用程序共享 JWT，您可以在您的状态下使用一个函数来代理您的 API 请求。

但是，正如您提到的显示图像，您可以创建一个特殊的图片组件，该组件从您的商店获取令牌，然后从 API 请求图像。像这样：

const Picture = ({ placeholderSrc, getSrcWithToken }) => {
    const [token, setToken] = useState(null);

    useEffect(() => {
        const token = await yourFunctionToFetchTokenFromstore();
        setToken(token);
    }, [finalSrc]);

    return <img src={token !== null ? getSrcWithToken(token) : placeholderSrc } />;
}

只要令牌未知，上面就会显示placeholderSrc，当令牌已知时，它会调用prop函数getSrcWithToken传递令牌，允许您在需要时构造URL。

【讨论】：

非常感谢，导出该上下文是否不明智？