OIDC SSO重定向导致Ajax请求失败的标准解决方案咨询

在使用OIDC SSO做访问控制的静态HTML+JS页面中，定期Ajax刷新数据时，常会遇到隐蔽的认证失败问题：

• 用户通过返回按钮加载缓存的页面，执行Ajax请求时因令牌失效返回401；
• 页面长时间闲置后，令牌过期导致Ajax刷新失败。

你的临时解决方案是在401时重载页面，但这种方式体验不佳，且存在无限循环风险。以下是业界通用的标准处理方案：

一、前端主动管理令牌生命周期 #

使用成熟的OIDC客户端库（如oidc-client-js）跟踪访问令牌的有效期，在令牌过期前自动刷新，从根源避免触发401：

// 初始化OIDC客户端
const oidcClient = new Oidc.UserManager({
  authority: "你的SSO授权服务器地址",
  client_id: "你的客户端ID",
  redirect_uri: window.location.origin + "/callback.html",
  response_type: "code",
  scope: "openid profile email",
  silent_redirect_uri: window.location.origin + "/silent-renew.html"
});

// 检查令牌有效性，即将过期时自动静默刷新
async function ensureValidToken() {
  const user = await oidcClient.getUser();
  if (!user) {
    await oidcClient.signinRedirect();
    return null;
  }
  // 提前5分钟触发刷新
  const expiresIn = user.expires_at - Date.now() / 1000;
  if (expiresIn < 300) {
    try {
      await oidcClient.signinSilent();
      return await oidcClient.getUser();
    } catch (e) {
      await oidcClient.signinRedirect();
      return null;
    }
  }
  return user;
}

// 改造后的Ajax请求函数
async function updateData(args, callback) {
  const user = await ensureValidToken();
  if (!user) return;
  
  $.ajax({
    xhrFields: { withCredentials: true },
    url: "/getit?" + args,
    headers: { "Authorization": `Bearer ${user.access_token}` },
    success: callback,
    error: function(xhr) {
      if (xhr.status === 401) {
        oidcClient.signinRedirect();
      }
    }
  });
}

二、全局Ajax拦截器统一处理401 #

通过全局拦截器捕获所有Ajax请求的401响应，统一处理令牌刷新和请求重试，避免每个请求单独编写逻辑：

// 全局Ajax拦截器配置
$.ajaxSetup({
  beforeSend: function(xhr) {
    oidcClient.getUser().then(user => {
      if (user) {
        xhr.setRequestHeader("Authorization", `Bearer ${user.access_token}`);
      }
    });
  },
  statusCode: {
    401: async function(xhr) {
      const originalRequest = this;
      try {
        // 尝试静默刷新令牌
        await oidcClient.signinSilent();
        const user = await oidcClient.getUser();
        // 更新请求头并重试原请求
        originalRequest.headers["Authorization"] = `Bearer ${user.access_token}`;
        $.ajax(originalRequest);
      } catch (e) {
        // 刷新失败，跳转登录页
        oidcClient.signinRedirect();
      }
    }
  }
});

// 原有updateData函数可简化
function updateData(args, callback) {
  $.ajax({
    xhrFields: { withCredentials: true },
    url: "/getit?" + args,
    success: callback
  });
}

三、后端配合优化认证响应 #

让后端在返回401时，通过响应体或头信息明确区分"令牌过期"和"权限不足"两种场景，避免前端误判：

示例后端JSON响应：

{
  "error_code": "token_expired",
  "message": "访问令牌已过期，请刷新"
}

前端可根据error_code决定是触发令牌刷新还是直接跳转登录。

四、配置缓存策略避免过期页面 #

在Apache中为HTML页面设置禁止缓存的响应头，防止用户通过返回按钮加载已失效的缓存页面：

<FilesMatch "\.(html)$">
  Header set Cache-Control "no-cache, no-store, must-revalidate"
  Header set Pragma "no-cache"
  Header set Expires 0
</FilesMatch>

方案对比 #

你的临时方案通过页面重载触发SSO重定向，虽简单但会中断用户操作。标准方案核心是静默刷新令牌，在不打扰用户的前提下恢复认证状态，仅当静默刷新失败时才跳转登录，大幅提升用户体验。

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