如何在axios中配置授权承载令牌？

Posted 2023-03-10

【中文标题】如何在axios中配置授权承载令牌？

【英文标题】：How to configure Authorization bearer token in axios?

【发布时间】：2021-08-28 09:49:08

【问题描述】：

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

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 个文件中进行配置，我尝试过，但是当我登录时，我收到未经身份验证的消息，当我签入网络选项卡时，我看到 Bearer null 已传递给授权。请参阅下面我的配置尝试。

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

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

【问题讨论】：

这就是 Axios 拦截器的用途。

【参考方案1】：

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

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

【讨论】：

我在 src 的 api 文件夹中进行了配置。将代码添加到 api.js 之后。得到同样的错误。

【参考方案2】：

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

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

查找更多信息here

【讨论】：

当我在我的 api.js 文件中的导出顶部添加时似乎不起作用。

@Still.Dre 描述它是如何不起作用的。您是否看到请求中的标头？值错了吗？

@Still.Dre 不起作用是一个全球概念。请说明问题。有没有错误？你是如何实施的？怎么了？

【参考方案3】：

你可以直接在你创建的 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;