如何在 axios 中配置 Authorization bearer token？

Question

您好，我创建了一个登录操作（使用 Vuex），它将用户 jwt 令牌保存到本地存储。 在此登录操作中，我调用另一个操作来获取该用户创建的一些帖子。 当我在 fetchPosts 操作的 get 请求的 header 中传递令牌时，它工作得很好。

async login(context, user){
    try {
       const res = await api.post('/users/login', user)
       localStorage.setItem('jwt', res.data.token)
       context.commit('SET_USER', res.data.user)
       context.dispatch('fetchPosts')
    }catch(err){
       console.log(err.response.data)
    }
}

async fetchPosts(context){
    try {
        const res = await api.get('/posts', {
          headers: {
            Authorization: `Bearer ${localStorage.getItem('jwt')}`
          }
        })
        context.commit('SET_POSTS', res.data)
     }catch(err){
        console.log(err.response.data)
     }
}

上面的代码工作得很好，但问题是我有几个授权路线，我不想通过

headers: { Authorization: `Bearer ${localStorage.getItem('jwt')}`}

对于所有 api 请求。

我想在 1 个文件中进行配置，我试过了，但是当我登录时，我收到未经身份验证的消息，当我检查 .networks 选项卡时，我看到 Bearer null 已通过授权。 请参阅下面我的配置尝试。

import axios from 'axios'
export default axios.create({
  baseURL: 'http://localhost:3000',
  headers: {
    Authorization: `Bearer ${localStorage.getItem('jwt')}`
  }
})

任何人都知道我哪里出错了或者我可以做些什么来解决这个问题。

Answer 1

这是一个简单的例子来说明如何做到这一点。

    axios.interceptors.request.use(
        (config) => {
            const token = localStorage.getItem('authtoken');
    
            if (token) {
                config.headers['Authorization'] = `Bearer ${token}`;
            }
    
            return config;
        },
    
        (error) => {
            return Promise.reject(error);
        }
    );

在此处查找更多信息

Answer 2

axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;

https://axios-http.com/docs/config_defaults

Answer 3

将此添加到您的 main.js 文件中

    axios.interceptors.request.use(config => {
      const token = localStorage.getItem("jwt");
      config.headers["Authorization"] = `Bearer ${token}`;
      return config;
    });

Answer 4

您可以直接在您创建的 axios 实例上应用拦截器

import axios from "axios";

const baseDomain = process.env.VUE_APP_API_URL;

const baseURL = `${baseDomain}`;
const instance = axios.create({
  baseURL
});
instance.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('accesstoken');
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }

    return config;
  },

  (error) => {
    return Promise.reject(error);
  }
);

export default instance;