如何安全存储并复用Auth0访问令牌至过期？优化令牌生成逻辑

我有一个从Auth0 Management API生成访问令牌的函数，用于外部API请求的授权，代码如下：

const generateBearerToken = async () => {
    try {
      const options = {
        method: 'POST',
        url: process.env.NEXT_PUBLIC_URL,
        headers: { 'content-type': 'application/json' },
        data: {
          client_id: process.env.NEXT_PUBLIC_CLIENT_ID,
          client_secret: process.env.NEXT_PUBLIC_CLIENT_SECRET,
          audience: process.env.NEXT_PUBLIC_AUDIENCE,
          grant_type: "client_credentials"
        }
      };
  
      const response = await axios(options);
      const { access_token } = response.data;
      console.log("Bearer token:", access_token);
      return access_token;
    } catch (error) {
      console.error('Error generating bearer token:', error?.response?.data);
      return null;
    }
  };

由于Auth0每月仅允许生成1000个令牌，我希望为每个用户存储该令牌直至过期（我的令牌有效期为1周），并在后续外部API请求中复用它。

我有几个问题：

• 从Auth0生成授权令牌后，理想的安全存储方式是什么，以便能复用至令牌过期？
• 将令牌存储在localStorage中是否安全？
• 令牌过期后重新生成并再次存储的逻辑是什么？

另外，我有一个使用generateBearerToken()生成的访问令牌获取用户详情的函数，目前每次获取用户时都会生成新令牌，如何优化该逻辑以避免每次都生成令牌？

const fetchUser = async () => {
    setIsFetching(true);
    const token = await generateBearerToken();
    
    if (token) {
      console.log(process.env.NEXT_PUBLIC_API_URL);
      console.log("Access token from fetchUser:", token);
      
      const apiUrl = `${process.env.NEXT_PUBLIC_API_URL}fetchPatient`;
      const options = {
        method: "GET",
        url: apiUrl,
        headers: { "authorization":  `Bearer ${token}` },
      };
      console.log(options);
  
      axios(options)
        .then(response => {
          try {
            setIsFetching(false);
            setAccessToken(token);
          } catch (error) {
            console.error('Error parsing JSON:', error);
          }
        })
        .catch(error => console.error('Error fetching data:', error));
    } else {
      console.log("Access token is null, request not sent.");
      setIsFetching(false);
    }
};

1. 令牌的理想安全存储方式 #

• 前端场景：优先使用带HttpOnly、Secure、SameSite属性的Cookie存储。HttpOnly阻止JS读取令牌，避免XSS窃取；Secure确保仅通过HTTPS传输；SameSite降低CSRF风险，是浏览器环境存储敏感令牌的最优方案。
• 后端场景：存储在Redis等内存缓存中（配合自动过期策略），或加密后存入数据库，避免明文泄露。

2. localStorage存储是否安全？ #

不安全。localStorage属于前端可读写的存储，一旦页面存在XSS漏洞，攻击者可直接窃取令牌；同时数据会被同域名下的所有标签页读取，敏感信息暴露风险高，不适合存储访问令牌。

3. 令牌过期自动重新生成的逻辑 #

核心是绑定令牌与过期时间，使用前先校验有效性：

1. 生成令牌时，从Auth0响应中提取exp（JWT payload里的过期时间戳），或用expires_in计算出具体过期时间（当前时间 + 有效期秒数）。
2. 将令牌和过期时间一起存入安全存储（如Cookie、缓存）。
3. 每次使用令牌前：
   • 若令牌未过期，直接复用；
   • 若已过期（或提前5分钟预过期），调用generateBearerToken()重新生成，更新存储的令牌和过期时间。

4. 优化fetchUser函数，避免重复生成令牌 #

封装令牌管理工具，统一处理令牌的存储、校验与刷新，再改造fetchUser函数：

第一步：封装令牌管理工具 #

const tokenManager = {
  // 从Cookie获取存储的令牌数据（生产环境推荐用Cookie）
  getStoredToken() {
    const cookie = document.cookie.split('; ').find(row => row.startsWith('auth0_token='));
    if (!cookie) return null;
    try {
      return JSON.parse(decodeURIComponent(cookie.split('=')[1]));
    } catch (e) {
      document.cookie = 'auth0_token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
      return null;
    }
  },
  // 存储令牌到Cookie
  storeToken(token, expiresAt) {
    const data = JSON.stringify({ token, expiresAt });
    const date = new Date(expiresAt);
    document.cookie = `auth0_token=${encodeURIComponent(data)}; expires=${date.toUTCString()}; path=/; HttpOnly; Secure; SameSite=Strict`;
  },
  // 校验令牌是否有效
  isTokenValid(tokenData) {
    return tokenData && Date.now() < tokenData.expiresAt;
  },
  // 获取有效令牌（自动刷新）
  async getValidToken() {
    const tokenData = this.getStoredToken();
    if (this.isTokenValid(tokenData)) {
      return tokenData.token;
    }
    // 令牌过期，重新生成
    const newToken = await generateBearerToken();
    if (!newToken) return null;
    // 解析JWT获取过期时间
    const payload = JSON.parse(atob(newToken.split('.')[1]));
    const expiresAt = payload.exp * 1000; // 转换为毫秒时间戳
    this.storeToken(newToken, expiresAt);
    return newToken;
  }
};

第二步：优化fetchUser函数 #

const fetchUser = async () => {
  setIsFetching(true);
  try {
    const token = await tokenManager.getValidToken();
    if (!token) {
      console.log("Access token is null, request not sent.");
      setIsFetching(false);
      return;
    }

    const apiUrl = `${process.env.NEXT_PUBLIC_API_URL}fetchPatient`;
    const response = await axios({
      method: "GET",
      url: apiUrl,
      headers: { "authorization": `Bearer ${token}` },
    });

    setIsFetching(false);
    setAccessToken(token);
  } catch (error) {
    console.error('Error fetching data:', error);
    setIsFetching(false);
  }
};

内容的提问来源于stack exchange，提问作者Dipayan Sarkar