前端携带Bearer Token

前端携带Bearer Token

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

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

axios.create中携带

1. 在发送请求之前，先获取到 Bearer Token。
2. 在 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);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在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 Token
  config.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);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20