Google IAP登录成功后，如何简便携带授权Token调用API？

核心思路 #

利用Google IAP登录后自动设置的GCP_IAP_AUTH_TOKEN Cookie，提取其中的JWT Token，在前端API请求时自动添加到Authorization: Bearer <token>请求头中，这是无需额外依赖的最简实现方式。

具体步骤 #

1. 提取IAP Token Cookie
   编写一个简单的Cookie读取函数，获取IAP设置的认证Token：

   function getIapAuthToken() {
     const cookieName = 'GCP_IAP_AUTH_TOKEN';
     const value = `; ${document.cookie}`;
     const parts = value.split(`; ${cookieName}=`);
     if (parts.length === 2) return parts.pop().split(';').shift();
     return null;
   }
   

2. 自动为API请求添加Token头

   • 如果使用原生fetch，可以封装一个请求工具函数：

     async function fetchWithIapAuth(url, options = {}) {
       const token = getIapAuthToken();
       const headers = {
         ...options.headers,
         ...(token && { Authorization: `Bearer ${token}` })
       };
       return fetch(url, { ...options, headers });
     }
     
     // 使用示例
     fetchWithIapAuth('/api/your-endpoint')
       .then(res => res.json())
       .then(data => console.log(data));
     

   • 如果使用axios，可以添加请求拦截器：

     import axios from 'axios';
     
     axios.interceptors.request.use(config => {
       const token = getIapAuthToken();
       if (token) {
         config.headers.Authorization = `Bearer ${token}`;
       }
       return config;
     });
     
     // 后续所有axios请求都会自动携带Token
     axios.get('/api/your-endpoint')
       .then(res => console.log(res.data));
     

3. Nginx配置验证（可选）
   确保前端Nginx容器没有修改或阻止GCP_IAP_AUTH_TOKEN Cookie的传递，默认转发即可。如果遇到Cookie无法读取的情况，检查IAP的Cookie设置是否允许前端JS访问（IAP默认设置的HttpOnly为false，允许前端读取）。

注意事项 #

• IAP的Token会自动刷新，前端每次请求时读取最新的Cookie值即可，无需手动处理过期逻辑。
• 仅对/api/*路径的请求添加Token头即可，避免不必要的开销。

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