React应用刷新后gapi.client.getToken()返回null，如何避免重复授权？

要避免用户刷新页面后重复授权，核心是把Google OAuth2的Token持久化存储，页面加载时再恢复Token到gapi客户端。以下是具体修改方案：

1. 持久化Token到本地存储 #

修改handleAuthClick的回调逻辑，成功获取Token后将其存入localStorage：

function handleAuthClick() { 
    tokenClient.callback = async (resp) => { 
      if (resp.error !== undefined) { 
        throw resp; 
      }
      // 成功获取Token后，存入localStorage持久化
      if (resp.access_token) {
        localStorage.setItem('google-calendar-token', JSON.stringify(gapi.client.getToken()));
      }
    }; 

  if (gapi.client.getToken() === null) { 
    tokenClient.requestAccessToken({prompt: 'consent', access_type:"offline"}); 
  } else { 
    tokenClient.requestAccessToken({prompt: ''}); 
  } 
}

2. 页面加载时恢复Token #

在gapi客户端初始化完成后，从localStorage读取并恢复Token：

async function intializeGapiClient() {
  var API_KEY = "x";

  fetch("http://localhost:5050/id").then(resp => {
    return resp.json();
  }).then((data) => {
    API_KEY = data.val2;
  }).then(async () => {
    try{
      await gapi.client.init({
        apiKey: API_KEY,
        discoveryDocs: [DISCOVERY_DOC],
      });
      gapiInited = true;
      // 从本地存储恢复Token
      const savedToken = localStorage.getItem('google-calendar-token');
      if (savedToken) {
        gapi.client.setToken(JSON.parse(savedToken));
      }
      maybeEnableButtons();
    } catch {
      console.log("User not logged in")
    }
  })
}

3. 处理Token过期（可选优化） #

因为你设置了access_type:"offline"，会获取到refresh_token，可以用它自动刷新过期的access_token，避免用户再次授权：

// 检查并刷新过期Token的函数
async function refreshTokenIfNeeded() {
  const token = gapi.client.getToken();
  if (!token) return false;
  
  // 计算Token过期时间（提前60秒刷新，避免边界问题）
  const expiresAt = token.expires_at || (Date.now() / 1000 + token.expires_in);
  if (Date.now() / 1000 < expiresAt - 60) {
    return true;
  }

  // 使用refresh_token获取新的access_token
  try {
    await tokenClient.requestAccessToken({
      prompt: '',
      refresh_token: token.refresh_token
    });
    const newToken = gapi.client.getToken();
    localStorage.setItem('google-calendar-token', JSON.stringify(newToken));
    return true;
  } catch (error) {
    console.error('Token刷新失败:', error);
    localStorage.removeItem('google-calendar-token');
    return false;
  }
}

然后在初始化恢复Token后调用这个函数：

// 从本地存储恢复Token
const savedToken = localStorage.getItem('google-calendar-token');
if (savedToken) {
  gapi.client.setToken(JSON.parse(savedToken));
  // 自动刷新过期Token
  await refreshTokenIfNeeded();
}

4. 登出时清除本地Token #

添加登出逻辑时，记得同步清除本地存储的Token：

function handleSignoutClick() {
  const token = gapi.client.getToken();
  if (token !== null) {
    google.accounts.oauth2.revoke(token.access_token);
    gapi.client.setToken('');
    localStorage.removeItem('google-calendar-token');
    // 这里可以添加UI重置逻辑
  }
}

原理说明 #

gapi客户端默认只把Token存在内存中，页面刷新后就会丢失。通过将Token持久化到localStorage，刷新页面后可以重新加载Token，让gapi客户端识别到已有有效会话，从而跳过授权流程。

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