Shopify App-bridge session token在Vue+Laravel栈刷新后首次请求无效问题

• 修正Axios拦截器的异步写法，避免async与then混用导致的隐式Promise异常，修改后的参考代码如下：

import axios from "axios";
import { getSessionToken } from "@shopify/app-bridge-utils";

const instance = axios.create();

instance.interceptors.request.use(async function (config) {
  const token = await getSessionToken(window.shopify_app_bridge);
  console.log(token);
  config.headers["Authorization"] = `Bearer ${token}`;
  return config;
});

export default instance;

• 调整Laravel端Shopify配置的时钟偏移允许值：打开config/shopify.php文件，找到session_token_claim_leeway配置项，将值调整为120，允许最多2分钟的服务器时间与Shopify服务器时间偏差，避免新生成的token因时间不同步被判定为未生效。
• 排查Laravel端session token黑名单缓存逻辑：如果有自行实现的已使用token黑名单机制，临时关闭该功能测试，排查是否存在缓存规则错误将新token误判为已使用的无效token的情况。
• 检查App Bridge实例初始化逻辑：确保window.shopify_app_bridge是全局唯一的初始化实例，没有页面路由切换时重复初始化的问题，重复初始化会导致生成的token关联的实例上下文失效。
• 升级Laravel Shopify依赖包：如果你使用的是osiset/laravel-shopify扩展包，升级到适配Laravel 8的最新v17版本，旧版本的session token校验逻辑存在已知bug，会偶发新生成token校验失败的问题。

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