Laravel+Vue开发Shopify应用：Axios长请求JWT令牌过期求助

1. 调整会话令牌有效期 #

找到config/shopify.php配置文件，修改session_token_lifetime参数，延长令牌有效期适配长请求场景：

// config/shopify.php
'session_token_lifetime' => 3600, // 设置为1小时，可按需调整，最大不超过Shopify限制的24小时

2. Axios请求自动重试+令牌刷新 #

给Axios添加响应拦截器，捕获401令牌过期错误，自动刷新令牌并重试原请求：

前端Vue代码 #

import axios from 'axios';

axios.interceptors.response.use(
  res => res,
  async err => {
    const originalReq = err.config;
    // 仅重试一次，避免死循环
    if (err.response.status === 401 && !originalReq._retry) {
      originalReq._retry = true;
      try {
        // 调用后端接口获取新的session token
        const refreshRes = await axios.get('/api/refresh-shopify-token');
        const newToken = refreshRes.data.token;
        // 更新全局请求头
        axios.defaults.headers.common['X-Shopify-Access-Token'] = newToken;
        originalReq.headers['X-Shopify-Access-Token'] = newToken;
        // 重试原请求
        return axios(originalReq);
      } catch (refreshErr) {
        // 刷新失败，跳转重新授权
        window.location.href = '/login';
        return Promise.reject(refreshErr);
      }
    }
    return Promise.reject(err);
  }
);

后端Laravel代码 #

添加路由和控制器方法，返回新的session token：

// routes/api.php
Route::get('/refresh-shopify-token', [ShopifyTokenController::class, 'refresh'])->middleware('shopify.auth');

// app/Http/Controllers/ShopifyTokenController.php
public function refresh()
{
    $token = \Osiset\ShopifyApp\Facades\Shopify::getSessionToken();
    return response()->json(['token' => $token]);
}

3. 延长Laravel会话有效期 #

修改config/session.php的会话配置，确保后端会话不会过早过期：

// config/session.php
'lifetime' => 120, // 分钟，按需调整
'expire_on_close' => false,

如果是非常耗时的后端处理（比如大文件解析），可以在处理过程中定期调用session()->touch()来刷新会话有效期：

// 大文件处理逻辑中，每隔一段时间执行
session()->touch();

4. 异步处理长耗时任务 #

对于大文件上传、批量数据处理这类长任务，改用Laravel队列异步执行，避免同步请求占用会话：

后端步骤 #

1. 创建队列任务：php artisan make:job ProcessLargeFileUpload
2. 在任务类中编写文件处理逻辑
3. 控制器中接收文件后，分发任务：

public function upload(Request $request)
{
    $file = $request->file('large_file');
    dispatch(new ProcessLargeFileUpload($file, auth()->user()));
    // 返回任务ID给前端
    return response()->json(['task_id' => Str::uuid()]);
}

前端步骤 #

前端上传文件后，通过轮询监听任务进度，避免长时间持有请求会话：

// 上传文件后轮询进度
function pollTaskStatus(taskId) {
  const pollInterval = setInterval(async () => {
    const res = await axios.get(`/api/task/${taskId}/status`);
    if (res.data.completed) {
      // 任务完成，处理结果
      clearInterval(pollInterval);
    }
  }, 3000);
}

5. 更新laravel-shopify包到最新稳定版 #

旧版本包可能存在会话令牌处理的bug，执行以下命令更新：

composer update osiset/laravel-shopify

更新后清理缓存：php artisan config:clear && php artisan cache:clear

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