Express Router+Auth0+原生JS：前端登录后如何为请求附加认证？

1. 获取Auth0访问令牌 #

前端已实现登录，可通过Auth0客户端SDK获取访问令牌用于后端认证。首先确保已正确初始化Auth0客户端：

// 初始化Auth0客户端（放在登录逻辑前执行）
const auth0Client = await createAuth0Client({
  domain: '你的Auth0域名',
  clientId: '你的客户端ID',
  authorizationParams: {
    redirect_uri: window.location.origin,
    audience: '你的后端API标识符' // 需与后端、Swagger配置的API Audience完全一致
  }
});

封装令牌获取函数，自动处理静默刷新与弹窗重试：

async function getAuthToken() {
  try {
    // 静默获取令牌（自动刷新过期令牌）
    return await auth0Client.getAccessTokenSilently();
  } catch (err) {
    // 静默失败时，弹出授权窗口重新获取
    await auth0Client.getAccessTokenWithPopup();
    return await auth0Client.getAccessTokenSilently();
  }
}

2. 在请求中添加Authorization头 #

所有需要认证的POST/PUT/DELETE请求，需在请求头中携带Bearer {token}格式的认证信息。以下是基于fetch的示例：

POST请求示例

async function postData(apiUrl, payload) {
  const token = await getAuthToken();
  const response = await fetch(apiUrl, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${token}`
    },
    body: JSON.stringify(payload)
  });
  return response.json();
}

// 调用示例：postData('/api/users', { name: 'John' })

PUT请求示例

async function putData(apiUrl, payload) {
  const token = await getAuthToken();
  const response = await fetch(apiUrl, {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${token}`
    },
    body: JSON.stringify(payload)
  });
  return response.json();
}

// 调用示例：putData('/api/users/1', { name: 'John Doe' })

DELETE请求示例

async function deleteData(apiUrl) {
  const token = await getAuthToken();
  const response = await fetch(apiUrl, {
    method: 'DELETE',
    headers: {
      'Authorization': `Bearer ${token}`
    }
  });
  return response.json();
}

// 调用示例：deleteData('/api/users/1')

3. 通用请求封装（可选） #

为避免重复编写认证头逻辑，可封装一个通用认证请求函数：

async function authenticatedRequest(apiUrl, options = {}) {
  const token = await getAuthToken();
  // 合并默认认证头与自定义请求头
  const headers = {
    'Authorization': `Bearer ${token}`,
    ...options.headers
  };
  // 自动处理JSON格式请求体
  if (options.body && typeof options.body === 'object') {
    headers['Content-Type'] = 'application/json';
    options.body = JSON.stringify(options.body);
  }
  return fetch(apiUrl, { ...options, headers });
}

// 调用示例
authenticatedRequest('/api/orders', { method: 'POST', body: { productId: 10 } })
  .then(res => res.json())
  .then(data => console.log('订单创建成功:', data));

关键注意事项 #

• Audience参数必须匹配：初始化Auth0客户端时的audience需与后端API在Auth0中配置的标识符完全一致，否则后端会拒绝令牌。
• 令牌过期自动处理：getAccessTokenSilently()会自动刷新即将过期的令牌，若刷新失败（如用户会话过期），则通过弹窗重新授权。
• 无需额外配置：如你所说，Swagger测试已通过，说明后端认证逻辑正确，只需前端按上述方式携带令牌即可。

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