如何在Nuxt的HTTP插件中访问Store获取认证Token？

其实在Nuxt的HTTP插件里访问Store非常直接，因为Nuxt会给插件传递一个context上下文对象，里面就包含了我们需要的Store实例。下面给你调整代码并解释具体做法：

调整后的完整插件代码 #

import axios from 'axios';

// 导出插件函数，接收Nuxt的context参数，解构出store
export default function ({ store }) {
  const api = axios.create({ baseURL: 'http://127.0.0.1:8000/api/' });

  api.interceptors.request.use(function (config) {
    // 从Store中获取token，这里假设你的token存在store.state.auth.token路径下
    const authToken = store.state.auth.token;
    
    // 只有当token存在时，才添加Authorization头
    if (authToken) {
      config.headers.Authorization = `Bearer ${authToken}`;
    }
    
    return config;
  }, function (error) {
    // 处理请求错误逻辑
    return Promise.reject(error);
  });

  // 把api实例挂载到Nuxt的app上，这样在组件里可以通过this.$api访问
  this.$api = api;
}

关键说明 #

1. 插件的context参数：Nuxt的插件函数默认会接收一个context对象，里面包含了store、router、app等核心实例，我们直接解构出store就能使用。
2. Store路径适配：请根据你实际的Store结构调整store.state.auth.token的路径——比如如果你的token存在store.state.user.accessToken，就改成对应的路径。
3. 空token处理：添加了token存在性判断，避免请求头出现无效的Bearer （空值）情况。

额外提示（Nuxt 3场景） #

如果你是在Nuxt 3中开发，写法会略有不同，需要使用useStore() composable：

import axios from 'axios';
import { useStore } from 'vuex'; // 若用Pinia则对应引入Pinia的useStore

export default defineNuxtPlugin(() => {
  const store = useStore();
  const api = axios.create({ baseURL: 'http://127.0.0.1:8000/api/' });

  api.interceptors.request.use(config => {
    const token = store.state.auth.token;
    if (token) config.headers.Authorization = `Bearer ${token}`;
    return config;
  });

  return {
    provide: {
      api: api
    }
  };
});

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