保存在cookie中的Token在刷新页面之前未定义-React认证

Question

我通过将 jwt 令牌（从后端发送）存储在 cookie 中，在我的 Spring Boot - React 应用程序中创建身份验证机制。为了存储 cookie，我使用了“universal-cookie”包。用户登录后，它会被重定向到一个安全端点，因此我需要将令牌发送回后端以验证用户身份。问题是，在我刷新页面之前，cookie 是未定义的，因此发送到后端的令牌不正确，我收到服务器错误。有人知道应该如何解决这个错误吗？

这是我的代码：

我的 CookieService：

import Cookies from "universal-cookie";

const cookies = new Cookies();

export const cookieService = () => {
    const get = (key) => {
        return cookies.get(key);
    }

    const set = (key, value) => {
        cookies.set(key, value);
    }

    const remove = (key) => {
        cookies.remove(key);
    }

    return {
        get,
        set,
        remove
    }
}

登录请求：

const {get, set, remove} = cookieService();
const login = async (authRequest) => {
    const response = await fetch('/api/auth/login', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(authRequest)
    });
    if (response.status === 200) {
        const { token } = await response.json();
        set('token', token);
    }
    }
}

用户认证成功后重定向到的请求：

const {get, set, remove} = cookieService();`
const sucred = async () => {
    const response = await fetch('/api/secured', {
        method: 'GET',
        headers: {
            Authorization: `Bearer ${get('token')}` // here the get('token') is undefined before I refresh the page
        }
    });
    
    if (response.status === 200) {
        const data = await response.json();
        return data;
    }
}