前端如何给bearer token传值

封面图 • 2025-10-13 • jQuery

在前端开发中，给 `Bearer Token` 传值通常是在发送 HTTP 请求时，在请求头（Headers）中添加一个 `Authorization` 字段，格式如下：

```
Authorization: Bearer <token>
```

其中 `<token>` 是你从后端获取的访问令牌（Access Token）。

下面是几种常见前端框架或技术中如何设置 `Bearer Token` 的示例：

---

## ✅ 1. 使用 JavaScript (原生 Fetch API)

```javascript
const token = 'your_bearer_token_here';

fetch('https://api.example.com/data', {
  method: 'GET',
  headers: {
    'Authorization': 'Bearer ' + token,
    'Content-Type': 'application/json'
  }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
```

---

## ✅ 2. 使用 Axios（推荐）

```javascript
const token = 'your_bearer_token_here';

axios.get('https://api.example.com/data', {
  headers: {
    'Authorization': 'Bearer ' + token
  }
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error('Error:', error);
});
```

---

## ✅ 3. 在 Vue.js 中使用 Axios

```javascript
export default {
  methods: {
    fetchData() {
      const token = localStorage.getItem('token');
      this.$axios.get('/data', {
        headers: {
          'Authorization': 'Bearer ' + token
        }
      })
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        console.error('Error:', error);
      });
    }
  }
}
```

---

## ✅ 4. 在 React 中使用 Axios 或 Fetch

```javascript
const token = 'your_bearer_token_here';

fetch('https://api.example.com/data', {
  method: 'GET',
  headers: {
    'Authorization': 'Bearer ' + token,
    'Content-Type': 'application/json'
  }
})
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error(err));
```

---

## ✅ 5. 使用 jQuery（不推荐，但仍然可行）

```javascript
$.ajax({
  url: 'https://api.example.com/data',
  type: 'GET',
  headers: {
    'Authorization': 'Bearer your_bearer_token_here'
  },
  success: function(data) {
    console.log(data);
  },
  error: function(err) {
    console.error('Error:', err);
  }
});
```

---

## ✅ 6. 在 Postman 中测试 Bearer Token

- 打开 Postman。
- 选择请求方法（GET/POST 等）。
- 在 **Headers** 中添加：
  - Key: `Authorization`
  - Value: `Bearer <your_token>`
- 发送请求即可。

---

## 💡 小贴士

- 通常 `Bearer Token` 会存储在 `localStorage`、`sessionStorage` 或 `cookies` 中。
- 在每次请求前，确保从安全的地方获取 Token。
- 注意 Token 的安全性，不要暴露在客户端代码中（如日志、URL 参数等）。

---

如果你有特定的框架或场景（如 Vue、React、Angular、Node.js 等），我可以提供更具体的示例。欢迎继续提问！