Laravel Sanctum+React SPA登录后未重载请求鉴权失败问题

我正在使用Laravel Sanctum为React开发的SPA实现身份验证，登录逻辑如下：

// Login.jsx
const response = await loginUser(authDispatchContext, payload)
if (response){
    toast.success("登录成功，正在跳转。")
    navigate("/")
}

登录完成后直接进入仪表盘组件，同时发起API请求：

// Dashboard.jsx
import axios from "../config/axios";
....

const response = await axios.get(url + path)
setListings(response.data.data)

我的axios配置文件axios.js内容如下：

import axios from 'axios';
axios.defaults.withCredentials = true;
const user = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : null
console.log(user)
if(user){
    axios.defaults.headers.common = {'Authorization': `Bearer ${user.accessToken}`}
}
export default axios;

登录成功后出现异常：请求头已正确携带Bearer Token（信息如下），但Laravel服务器未通过身份验证，返回了重定向到登录页的响应，而我预期的是JSON响应。
请求头信息：

Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-GB,en-US;q=0.9,en;q=0.8
Authorization: Bearer 37|wOutmLsOgO3MPuuoJf13lmlbYTW4cQ3eax1FppGU

为何不刷新页面时出现此异常，刷新后却正常？请指明排查方向。

我的api.php中，除login和register外的所有路由都受auth:sanctum中间件保护：

Route::middleware('auth:sanctum')->group(function () {
...
Route::get("crypto/all", [Crypto::class, "all"]);
Route::get("crypto/meta/{currencyId}", [Crypto::class, "meta"]);

...
});

更新
若在请求中直接携带Bearer Token，一切功能正常：

const response = await axios.get(url + path, {
                headers: {
                    "Authorization": "Bearer " + token
                }
            })

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