如何解决页面每次打开或刷新时均触发Google Sign-in的问题？

嘿，我来帮你搞定这个每次刷新页面都要重新登录的问题！核心原因是gapi.client默认只把token存在内存里，页面一刷新就丢了，所以每次加载都得重新走授权流程。咱们通过把token持久化到本地存储（localStorage），再加上处理token过期的逻辑，就能实现认证持久化了。

关键修改步骤 #

1. 初始化时请求离线访问（获取refresh_token） #

首先，修改initTokenClient的配置，加上access_type: 'offline'——这是获取refresh_token的前提，有了它才能在token过期时自动刷新，不用用户重新登录：

function gisLoaded() {
  tokenClient = google.accounts.oauth2.initTokenClient({
    client_id: CLIENT_ID,
    scope: SCOPES,
    access_type: 'offline', // 必须加这个才能拿到refresh_token
    callback: async (resp) => {
      if (resp.error) {
        console.error(resp);
        document.getElementById('content').innerText = 'Authorization failed.';
        console.error('Error during authorization:', resp);
        return;
      }
      // 授权成功后，把token存到localStorage
      const currentToken = gapi.client.getToken();
      localStorage.setItem('google-calendar-token', JSON.stringify(currentToken));
      await createAllContent();
    },
  });
  gisInited = true;
  maybeAuthorize();
}

2. 页面加载时恢复保存的token #

在初始化gapi客户端后，从localStorage读取之前保存的token，设置给gapi.client：

async function initializeGapiClient() {
  await gapi.client.init({
    apiKey: API_KEY,
    discoveryDocs: [DISCOVERY_DOC],
  });
  // 从localStorage恢复token
  const savedToken = localStorage.getItem('google-calendar-token');
  if (savedToken) {
    gapi.client.setToken(JSON.parse(savedToken));
  }
  gapiInited = true;
  maybeAuthorize();
}

3. 优化授权逻辑，处理token过期 #

原来的authorize函数太简单，我们需要检查token是否有效、过期后尝试刷新，失败再让用户主动登录：

async function authorize() {
  const currentToken = gapi.client.getToken();
  
  if (!currentToken) {
    // 没有保存的token，尝试静默授权
    try {
      await tokenClient.requestAccessToken({ prompt: '' });
    } catch (err) {
      // 静默授权失败，显示登录按钮让用户主动触发
      console.log('Silent auth failed, please log in manually');
      document.getElementById('content').innerHTML = '<button onclick="triggerLogin()">Login with Google</button>';
    }
  } else {
    // 检查token是否过期
    const isExpired = Date.now() >= currentToken.expires_at * 1000;
    if (isExpired) {
      try {
        // 用refresh_token刷新token
        await tokenClient.requestAccessToken({ 
          prompt: '', 
          refresh_token: currentToken.refresh_token 
        });
        // 刷新成功后保存新token
        const newToken = gapi.client.getToken();
        localStorage.setItem('google-calendar-token', JSON.stringify(newToken));
        await createAllContent();
      } catch (err) {
        // 刷新失败，清除旧token并提示登录
        localStorage.removeItem('google-calendar-token');
        gapi.client.setToken(null);
        document.getElementById('content').innerHTML = '<button onclick="triggerLogin()">Login with Google</button>';
      }
    } else {
      // token有效，直接加载内容
      await createAllContent();
    }
  }
}

// 新增主动登录的函数
function triggerLogin() {
  tokenClient.requestAccessToken({ prompt: 'select_account' });
}

为什么这样能解决问题？ #

• 把token存在localStorage里，页面刷新后不会丢失，实现了持久化；
• access_type: 'offline'让我们拿到refresh_token，token过期时可以自动刷新，不用用户重复登录；
• 静默授权失败时不再强制弹出登录框，而是让用户主动触发，提升了用户体验。

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