Shopify社交登录获accessToken后，如何跳转/account路由并维持登录态

一、存储方案选择 #

根据需求，推荐以下几种存储方式，各有适用场景：

• Cookie：最适合让Shopify主题（Liquid模板）和前端同时识别登录状态，支持跨页面、跨请求传递，可设置过期时间。
• localStorage：持久化存储，关闭浏览器后仍保留，适合需要长期记住登录状态的场景，但Liquid模板无法直接读取。
• sessionStorage：会话级存储，关闭浏览器即清除，适合临时登录场景，同样仅前端可读取。

二、存储AccessToken的代码实现 #

假设你已经通过customerAccessTokenCreate接口获取到了accessToken，以下是不同存储方式的代码示例：

1. 存储到Cookie（推荐用于主题识别登录状态）

// 封装Cookie设置函数，适配Shopify店铺域名
function setShopifyCookie(name, value, expiresDays = 7) {
  let expiresStr = '';
  if (expiresDays) {
    const expiryDate = new Date();
    expiryDate.setTime(expiryDate.getTime() + expiresDays * 24 * 60 * 60 * 1000);
    expiresStr = `; expires=${expiryDate.toUTCString()}`;
  }
  // 自动适配店铺域名：自定义域名直接用当前域名，myshopify域名用根二级域名
  const storeDomain = window.location.hostname.includes('.myshopify.com')
    ? `.${window.location.hostname.split('.').slice(-2).join('.')}`
    : window.location.hostname;
  
  document.cookie = `${name}=${value}${expiresStr}; path=/; domain=${storeDomain}; secure; SameSite=Lax`;
}

// 保存accessToken到Cookie
const accessToken = '获取到的实际token'; // 替换为你的accessToken
setShopifyCookie('customer_access_token', accessToken);

2. 存储到localStorage（持久化）

const accessToken = '获取到的实际token';
localStorage.setItem('shopify_customer_token', accessToken);

3. 存储到sessionStorage（会话级）

const accessToken = '获取到的实际token';
sessionStorage.setItem('shopify_customer_token', accessToken);

三、跳转至/account路由 #

存储完成后，直接通过JS跳转即可：

window.location.href = '/account';

四、让网站识别登录状态 #

• 使用Cookie时：Shopify主题的Liquid模板可以直接读取Cookie，示例：

  {% if cookies.customer_access_token %}
    <!-- 显示登录后内容，比如用户信息、订单入口 -->
    <p>欢迎回来！</p>
  {% else %}
    <!-- 显示登录/注册入口 -->
    <a href="/account/login">登录</a>
  {% endif %}
  

• 使用localStorage/sessionStorage时：在页面加载时读取token，调用Storefront API的customer查询接口验证有效性，再更新页面UI：

  window.addEventListener('load', () => {
    const token = localStorage.getItem('shopify_customer_token');
    if (token) {
      // 调用Storefront API验证token并获取用户信息
      fetch('/api/graphql', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-Shopify-Storefront-Access-Token': '你的Storefront API密钥',
          'Authorization': `Bearer ${token}`
        },
        body: JSON.stringify({
          query: `query {
            customer {
              firstName
              lastName
            }
          }`
        })
      })
      .then(res => res.json())
      .then(data => {
        if (data.data.customer) {
          // 验证成功，渲染登录后UI
          console.log('用户已登录', data.data.customer);
        } else {
          // token无效，清除存储并跳转登录页
          localStorage.removeItem('shopify_customer_token');
          window.location.href = '/account/login';
        }
      });
    }
  });
  

注意事项 #

• 必须使用HTTPS传输（Shopify店铺默认支持），Cookie设置secure属性，防止token被明文窃取。
• Cookie的SameSite属性设为Lax或Strict，降低CSRF风险。
• 定期验证token有效性，避免使用过期或无效的token请求API。

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