如何在 NuxtJS 中设置全局 $axios 标头

Posted 2023-02-22

【中文标题】如何在 NuxtJS 中设置全局 $axios 标头

【英文标题】：How to set global $axios header in NuxtJS

【发布时间】：2020-09-12 10:01:01

【问题描述】：

我已经尝试了两天了。我是 Nuxt 的新用户（尽管我已经使用 Vue 几年了），所以我只是想弄清楚这一切是如何工作的。

在我的 Nuxt 项目中，我安装了 Axios 模块：

nuxt.config.js

export default 
  plugins: [
    ...
    '~/plugins/axios',
  ],
  axios: 
    baseURL: 'https://my-url.com/wp-json/wp-v2',
    https: true,
  ,

plugins/axios.js

export default ( $axios, env ) => 
  $axios.onRequest(config => 
    $axios.setToken(env.WP_API_KEY, 'Bearer');
  );

在我的页面中，我正在尝试使用 asyncData 函数从我的 WordPress API 中提取数据，例如：

export default 
  async asyncData(context) 
    const data = await context.$axios.$get('/media');
    console.log(data);
    return  data ;
  

但是，我不断收到 401 Not Authorized 错误，基本上说明我的 Authorization: Bearer <token> 没有通过。但是，使用 Postman，我可以验证该端点确实可以工作并返回我需要的所有 JSON，因此问题必须出在我设置 axios 全局标头的方式上。

很难找到任何关于如何使用 Nuxt/Axios 模块设置全局标头的真实示例。我在docs 中看到了如何使用setToken，但是它并没有准确地显示将其放置在哪里。

我的设置有什么问题，我该如何解决？

【参考方案1】：

很典型的是，我在发布问题 15 分钟后就可以正常工作。

这样设置标题似乎可行。我不确定为什么 setToken 方法不想工作。

export default ( $axios, env ) => 
  $axios.onRequest(config => 
    config.headers.common['Authorization'] = `Bearer $env.WP_API_KEY`;
  );

【参考方案2】：

如果您使用的是 Nuxt 身份验证模块，这就是我的实现方式。

// nuxt.config.js
modules: [
 '@nuxtjs/auth',
 '@nuxtjs/axios',
],
auth: 
strategies: 
  local: 
    endpoints: 
      login:  url: '/auth/login', method: 'post', propertyName: 'accessToken' ,
      logout: false,
      user:  url: '/auth/me', method: 'get', propertyName: false 
    ,
  
,
redirect: 
  login: '/auth/signin',
  logout: '/auth/signin',
  callback: false,
  home: false,
,
cookie: false,
token: 
  prefix: 'token',
,
  plugins: ['~/plugins/auth.js'],
,



// plugins/axios.js
export default function ( $axios, $auth, redirect, store ) 
$axios.onRequest((config) => 
    config.headers = 
    'Content-Type': 'application/json',
    'Accept': 'application/json',
    'Authorization': store.state.auth.tokenlocal, // refers to nuxt.config.js->auth.token
    
)

    $axios.onError((error) => 
        if (error.response.status === 500) 
            redirect('/error')
        
    )




// store/index.js
export const getters = 
    authenticated(state) 
        return state.loggedIn;
    ,
    user(state) 
        return state.user;
    
;

export const state = () => (
    busy: false,
    loggedIn: false,
    strategy: "local",
    user: false,
);