当前位置：首页 > news >正文

前端携带Bearer Token

news 2025/8/22 15:06:16

前端携带`Bearer Token`

在前端使用 axios 发送请求时，可以通过设置请求头来携带 Bearer Token。Bearer Token 是一种常用的身份验证方式，它通常用于 OAuth2 授权流程中。

要在 axios 中携带 Bearer Token，可以通过设置 Authorization 请求头来实现。

`axios.create`中携带

在发送请求之前，先获取到 Bearer Token。
在 axios 的配置对象中设置 headers 属性，并将 Authorization 请求头设置为 Bearer ${token}，其中 ${token} 为上一步获取到的 Bearer Token。

示例代码：

import axios from 'axios';// 获取 Bearer Token
const token = 'your_bearer_token_here';// 创建 axios 实例
const instance = axios.create({baseURL: 'https://api.example.com',headers: {Authorization: `Bearer ${token}`}
});// 发送 GET 请求
instance.get('/users').then(response => {console.log(response.data);
}).catch(error => {console.error(error);
});

在`interceptors.request`中携带

在 axios 中，可以通过拦截器（interceptor）来对请求或响应进行全局的处理。具体地说，在发送请求之前，我们可以使用 axios.interceptors.request.use 方法注册一个请求拦截器，并在其中设置请求头。

示例代码：

import axios from 'axios';// 获取 Bearer Token
const token = 'your_bearer_token_here';// 注册请求拦截器
axios.interceptors.request.use(config => {// 在请求头中携带 Bearer Tokenconfig.headers.Authorization = `Bearer ${token}`;return config;
}, error => {return Promise.reject(error);
});// 发送 GET 请求
axios.get('https://api.example.com/users').then(response => {console.log(response.data);
}).catch(error => {console.error(error);
});