Auth0 403 Forbidden无效授权码：页面刷新后用户表无法加载

核心根源：授权码重复使用 + Access Token未持久化 #

• 授权码（authorisation_code）通常是一次性有效的：首次启动时，你用该授权码成功换取Access Token后，服务器会标记此授权码已失效。刷新页面后，代码再次复用同一个失效的授权码发起请求，服务器直接返回403（授权码无效）。
• 未对获取到的access_token做持久化存储：拿到Access Token后仅存在内存变量中，刷新页面后内存清空，代码只能再次尝试用旧授权码请求，触发403错误。

代码中的具体问题点 #

• 无Token复用逻辑：页面刷新时，未先检查本地是否有有效的Access Token，直接走授权码换取流程，导致重复使用失效的授权码。
• userTable()执行时机错误：postAccessToken中不管fetch请求是否成功（比如服务器返回403时），都会直接调用userTable()，导致表格在无有效数据时依然渲染，表现为加载失败。
• 响应处理不严谨：postAuthorisationCode中硬编码通过slice(4, rdataLen)截取响应文本，假设前4位是状态码，一旦服务器返回非200响应，会直接导致JSON解析失败，后续流程中断。
• postAccessToken请求格式不规范：请求Body直接传入access_token字符串，但未设置Content-Type头（如application/json或text/plain），服务器可能无法正确解析请求内容，虽首次请求可能兼容，但存在潜在问题。

修复建议 #

• 持久化存储Access Token：拿到access_token后存入localStorage或sessionStorage，示例：

  localStorage.setItem('access_token', access_token);
  

• 调整页面初始化逻辑：页面加载时先检查本地是否有未过期的Access Token，有则直接调用postAccessToken；无则再走授权码换取流程。
• 修正userTable()执行时机：确保仅在fetch请求成功（response.ok为true）时调用，示例：

  .then((response) => {
      if (response.ok) {
          return response.text();
      }
      throw new Error('请求失败');
  })
  .then((rdata) => {
      console.log(rdata);
      userTable();
  })
  

• 规范响应处理：弃用硬编码截取，改用标准响应解析方式，示例：

  .then((response) => {
      if (!response.ok) {
          throw new Error(`HTTP错误：${response.status}`);
      }
      return response.json(); // 若服务器返回标准JSON格式
  })
  .then((returnObj) => {
      let access_token = returnObj.access_token;
      postAccessToken(access_token);
  })
  

• 完善postAccessToken请求头：添加匹配的Content-Type，示例：

  headers: {
      Accept: "application/json",
      'Content-Type': 'text/plain' // 或根据服务器要求设置
  },
  

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