Vue+Laravel环境下如何自动为Axios添加Bearer Token请求头？

场景描述 #

我需要自动获取当前已认证用户的Token来设置请求头，从而获取用户数据。最初硬编码Token的代码可正常工作：

async getUser() {
    const config = {
                headers: {
                    'Accept': 'application/json',
                    'Authorization': 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJ...'
                }
            }
  await this.axios
    .get("/api/auth/testapi", config)
    .then((response) => {
      this.user = response.data;
    })
    .catch((error) => {
      console.log(error);
      this.user = [];
    });
},

但尝试通过LocalStorage自动获取Token的代码无法正常运行：

async getUser() {
    const token = localStorage.getItem('access_token');
    const config = {
                headers: {
                    'Accept': 'application/json',
                    'Authorization': `Bearer ${token}`
                }
            }
  await this.axios
    .get("/api/auth/testapi", config)
    .then((response) => {
      this.user = response.data;
    })
    .catch((error) => {
      console.log(error);
      this.user = [];
    });
},

后续更新app.js代码后，出现语法错误提示：';' expected.，代码如下：

require("./src/main.js");
import VueAxios from "vue-axios";
import axios from "axios";
Vue.use(VueAxios, axios);


if (localStorage.has("access_token")) {
axios.defaults.headers.common["Authorization"] =
"Bearer " + localStorage.getItem("access_token");
}

loginSuccess(accessToken) {
localStorage.setItem('access_token', accessToken);
window.location.href = '/home';
}

问题排查与解决 #

1. LocalStorage获取Token失效的可能原因 #

• Token未正确存入LocalStorage：检查登录逻辑中localStorage.setItem('access_token', accessToken)是否执行，以及accessToken是否为有效值。可在浏览器控制台执行localStorage.getItem('access_token')确认Token存在且格式正确。
• Token已过期或无效：即使Token存在，若已过期或被后端作废，请求会返回401 Unauthorized错误，需查看网络请求的响应信息确认。
• Token为空导致请求头无效：若token为null或undefined，会生成Bearer null这类无效授权头，建议添加判断逻辑：

  const token = localStorage.getItem('access_token');
  const config = {
      headers: {
          'Accept': 'application/json',
          ...(token && {'Authorization': `Bearer ${token}`})
      }
  }
  

2. app.js中的语法错误修复 #

报错';' expected.是两个问题导致：

• LocalStorage没有has()方法，正确判断键是否存在应使用localStorage.getItem('access_token') !== null
• loginSuccess函数定义缺少function关键字（若不是Vue组件方法）

修正后的代码：

require("./src/main.js");
import VueAxios from "vue-axios";
import axios from "axios";
Vue.use(VueAxios, axios);

// 修正Token存在判断逻辑
if (localStorage.getItem("access_token") !== null) {
  axios.defaults.headers.common["Authorization"] = "Bearer " + localStorage.getItem("access_token");
}

// 补全function关键字
function loginSuccess(accessToken) {
  localStorage.setItem('access_token', accessToken);
  window.location.href = '/home';
}

3. 更优的全局Axios配置方案 #

在app.js中配置全局请求头后，后续组件请求无需手动设置Authorization，简化代码：

// app.js中配置全局授权头
if (localStorage.getItem("access_token")) {
  axios.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem("access_token")}`;
}

// 组件中简化getUser方法
async getUser() {
  try {
    const response = await this.axios.get("/api/auth/testapi", {
      headers: {
        'Accept': 'application/json'
      }
    });
    this.user = response.data;
  } catch (error) {
    console.log(error);
    this.user = [];
  }
}

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