Laravel Passport认证：如何在Bootstrap.js中配置Axios携带Bearer Token

我来帮你完善这个Axios的全局Token配置，完美适配Laravel Passport的认证需求，还能严格遵循DRY原则～

1. 核心逻辑梳理 #

我们要实现的核心目标很明确：

• 一次性获取有效的Personal Access Token
• 全局注入到Axios请求头，让所有请求自动携带
• 处理Token缺失、过期等异常情况
• 避免重复请求Token，兼顾性能和体验

2. 完整的bootstrap.js配置代码 #

// bootstrap.js
import axios from 'axios';

window.axios = axios;

// 先设置Axios基础通用头
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

// 全局认证Token初始化函数
async function setupAuthToken() {
    try {
        // 调用后端接口获取个人访问Token列表
        const response = await window.axios.get('/oauth/personal-access-tokens');
        
        // 校验并提取有效Token（取第一个可用的Token）
        if (response.data && Array.isArray(response.data) && response.data.length > 0) {
            const validToken = response.data[0].token;
            // 注入到Axios全局请求头
            window.axios.defaults.headers.common['Authorization'] = `Bearer ${validToken}`;
            // 把Token存在localStorage，页面刷新后无需重新请求
            localStorage.setItem('laravel_passport_token', validToken);
        } else {
            console.warn('未找到有效的个人访问Token');
            // 可选：无Token时跳转到登录/Token生成页面
            // window.location.href = '/generate-token';
        }
    } catch (error) {
        console.error('获取认证Token失败:', error);
        // 401未授权时自动跳转到登录页
        if (error.response?.status === 401) {
            window.location.href = '/login';
        }
    }
}

// 页面加载时立即执行Token配置
setupAuthToken();

// 额外优化：页面刷新时从localStorage恢复Token，避免重复请求
const savedToken = localStorage.getItem('laravel_passport_token');
if (savedToken) {
    window.axios.defaults.headers.common['Authorization'] = `Bearer ${savedToken}`;
}

3. 关键细节解释 #

• async/await写法：比你原来的.then()更简洁易读，符合现代JS开发习惯
• 全局请求头注入：通过axios.defaults.headers.common设置后，所有Axios发起的请求都会自动带上Authorization: Bearer xxx头，彻底遵循DRY原则
• localStorage持久化：页面刷新后无需重新调用Token接口，直接从本地缓存恢复，提升用户体验
• 异常处理：捕获请求失败、Token缺失、未授权等场景，给出友好的处理逻辑
• 安全校验：确保从后端拿到的是有效数组再提取Token，避免空值导致的请求报错

4. 可选优化建议 #

• 可以添加Axios请求拦截器，在每个请求发送前检查Token是否过期，过期则自动刷新
• 对于敏感操作，建议在后端额外校验Token的权限范围（Laravel Passport本身支持，可结合策略进一步加强）
• 如果你的应用支持多用户，可以把Token和用户ID绑定存储，避免切换用户时的Token冲突

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