如何在ReactJS应用程序中保留access_token？

Question

我正在学习如何使用 JWT 令牌创建登录系统。众所周知，该策略涉及创建两个代币：

access_token

和

refresh_token

。

关于

refresh_token

，它保存在cookie中并在服务器端进行管理。

access_token

由用户（前端应用程序）管理，互联网上的大多数教程都将其保存在

localStorage

中。

经过一番研究，我得出的结论是，最好的选择是将这个令牌（

access_token

）保存在应用程序的内存中。

为了尝试达到相同的结果，我创建了一个名为

AuthContext.js

:

的上下文

import { useState, createContext, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';

export const AuthContext = createContext({});

const AuthProvider = ({ children }) => {
    const [accessToken, setAccessToken] = useState(null);
    
    const signIn = async (email, password) => {
        setLoadingAuth(true);
        try {
            const { data } = await axios.post('http://localhost/signIn', { email: email, password: password });
            setAccessToken(data.accessToken);
            setLoadingAuth(false);
            navigate('/dashboard');
        } catch (error) {
            alert(error.response.data.message);
            setLoadingAuth(false);
            console.error(error);
        }
    }
    
    return(
        <AuthContext.Provider value={{ accessToken, userInfo, loadingAuth, loading, signIn, logout }}>
            {children}
        </AuthContext.Provider>
    );
}

export default AuthProvider;

它与 React

Router DOM 库一起导入到 

App.js :

export default function App() {
    return (
        <BrowserRouter>
            <AuthProvider>
                <RouterApp />
            </AuthProvider>
        </BrowserRouter>
    );
}

问题在于，用户刷新浏览器屏幕后，存储在

access_token

状态中的

accessToken

就丢失了。

显然是因为它被保存在内存中。但是，由于我的应用程序没有关闭，我相信

accessToken

应该仍然存储该值，对吗？

为了解决这个问题，我正在考虑创建一个

SINGLETON

，即一个将使用

object.freeze

函数以便将

accessToken

保留一段时间的类。

这是最好的选择吗？

Answer 1

您可以使用本地存储

// save the access_token

localstorage.setItem("access_token", "access_token value")

// read the access_token

localstorage.getItem("access_token")