在 javascript 中实现 fetch api 的 sso（单点登录）策略，核心做法是在发起请求前检查本地存储中的认证令牌（如 jwt），若存在则自动将其注入到 http 请求头中。具体操作是封装一个自定义的 `fetch` 函数或使用 `xmlhttprequest` 拦截器，在每次请求时读取 `localstorage` 或 `sessionstorage` 中的 token 字段，并设置 `authorization: bearer
如何封装带 Token 注入的 Fetch 函数
直接回答：通过创建一个高阶函数或包装器来覆盖原生 `fetch`，可以在不修改业务代码的情况下统一处理认证逻辑。该包装器会在调用实际网络请求前，从存储中获取 token 并将其合并到默认配置对象中。
function authenticatedFetch(url, options = {}) {
const token = localStorage.getItem('auth_token');
// 合并默认 headers 与用户传入的 headers
const defaultHeaders = {
'Content-Type': 'application/json',
};
if (token) {
defaultHeaders['Authorization'] = `Bearer ${token}`;
}
const fetchOptions = {
...options,
headers: {
...defaultHeaders,
...options.headers,
},
};
return fetch(url, fetchOptions)
.then(response => {
if (response.status === 401) {
// 处理未授权，例如重定向到登录页
handleUnauthorized();
throw new Error('Unauthorized');
}
return response;
});
}
function handleUnauthorized() {
localStorage.removeItem('auth_token');
window.location.href = '/login';
}
上述代码定义了一个 `authenticatedFetch` 函数，它接收 URL 和可选的配置项。首先从 `localStorage` 获取 `auth_token`。如果存在，则将其添加到 `Authorization` 头部。接着，它将默认头部（如 Content-Type）和用户提供的头部进行合并，确保用户配置不会丢失。最后调用原生 `fetch`。如果响应状态为 401，则调用 `handleUnauthorized` 清除 token 并重定向，这符合 SSO 失效后的标准行为。
如何处理跨域 Cookie 认证的 SSO 场景
直接回答：当 SSO 依赖服务端下发的 HttpOnly Cookie 而非前端手动管理的 Token 时，必须在 Fetch 请求中显式设置 `credentials: 'include'` 选项。这允许浏览器在跨域请求中自动携带认证 Cookie，无需前端手动读取和注入。
// 假设主域名是 example.com，子域名是 api.example.com
// 后端设置了 Set-Cookie: session_id=abc123; Domain=.example.com; Path=/; HttpOnly
const ssoFetch = (url, options = {}) => {
const baseOptions = {
credentials: 'include', // 关键：允许携带跨域 Cookie
mode: 'cors',
};
const finalOptions = {
...baseOptions,
...options,
headers: {
...baseOptions.headers,
...options.headers,
},
};
return fetch(url, finalOptions);
};
// 使用示例
ssoFetch('https://api.example.com/user/profile')
.then(res => res.json())
.then(data => console.log(data));
此段代码展示了基于 Cookie 的 SSO 实现。关键在于 `credentials: 'include'` 属性。在跨域场景下，默认情况下浏览器不会发送 Cookie。设置此选项后，只要服务端在 `Set-Cookie` 响应头中正确配置了 `Domain` 属性（通常设置为顶级域名以共享给所有子域），浏览器就会自动在后续请求中附带该 Cookie。这种方式避免了前端暴露敏感 Token，安全性更高，且符合传统 Web SSO 的标准实践。注意，服务端必须配合配置 CORS 头，特别是 `Access-Control-Allow-Credentials: true`，否则请求会被浏览器拦截。
当 Fetch 请求返回 401 时程序的具体行为是什么
直接回答：当封装后的 Fetch 函数接收到 401 状态码时，程序会执行预定义的错误处理逻辑，通常是清除本地存储中的认证信息并重定向用户到登录页面，以防止无效令牌被继续使用。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
