Vue3+Laravel通过SAML2.0登录后前端无法获取Passport令牌问题

核心问题分析 #

SAML2.0登录流程由后端触发完成，前端未参与令牌传递环节，导致localStorage中没有存储令牌，Axios初始化时读取的localStorage.getItem('token')自然为null。

具体解决步骤 #

1. 调整Laravel SAML回调逻辑，传递令牌到前端 #

在SAML登录的回调路由中，完成用户认证后生成Passport令牌，通过重定向+URL参数的方式将令牌传递给前端：

// SAML回调控制器示例代码
public function callback()
{
    // 执行SAML认证逻辑，获取登录用户
    $user = $this->saml->authenticate();
    
    // 生成Passport个人访问令牌
    $token = $user->createToken('MyApp')->accessToken;
    
    // 重定向到前端的令牌接收页面，携带token参数
    return redirect()->to('http://frontend.com/saml-callback?token=' . $token);
}

2. 前端处理SAML回调，存储令牌并更新Axios配置 #

在Vue3中创建对应的回调页面（如/saml-callback），在页面加载时提取URL中的令牌，存入localStorage并更新Axios请求头：

// Vue3组件的onMounted钩子
onMounted(() => {
  const urlParams = new URLSearchParams(window.location.search);
  const token = urlParams.get('token');
  
  if (token) {
    localStorage.setItem('token', token);
    // 动态更新Axios授权头
    axios.defaults.headers['Authorization'] = `Bearer ${token}`;
    // 跳转到首页或目标页面
    router.push('/');
  }
});

3. 优化Axios请求拦截器，确保每次请求都携带最新令牌 #

避免仅在初始化时设置一次请求头，添加请求拦截器动态读取令牌：

// Axios全局拦截器配置
axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers['Authorization'] = `Bearer ${token}`;
  }
  return config;
});

4. 验证后端CORS配置 #

确保Laravel的CORS配置允许前端域名访问SAML相关路由，修改config/cors.php：

return [
    'paths' => ['api/*', 'saml/*'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['http://frontend.com'],
    'allowed_headers' => ['*'],
    'supports_credentials' => true,
];

5. 修正Passport令牌生成代码（可选） #

原代码中accessToken前的空格不影响执行，但建议修正为规范写法：

$success['token'] = $user->createToken('MyApp')->accessToken;

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