Vue 如何携带 Token 发送请求

前言

在 Vue 应用中，经常需要向后端发送请求以获取或更新数据。这些请求通常需要附带用户凭证，例如 Token，以验证用户的身份并授权他们访问受保护的资源。本文将详细介绍如何在 Vue 中携带 Token 发送请求，并探讨一些常见的陷阱和最佳实践。

配置 CORS

跨域资源共享 (CORS) 是浏览器强制实施的安全机制，它限制不同域之间的 HTTP 请求。为了允许 Vue 应用程序从不同域的服务器获取数据，必须在服务器端配置 CORS。这可以通过在响应头中包含以下标头来实现：

Access-Control-Allow-Origin: *

这将允许来自任何域的请求访问该服务器。为了提高安全性，可以将 Access-Control-Allow-Origin 设置为允许的域列表。

Vue.js 中携带 Token

在 Vue.js 中，可以使用 Axios HTTP 库轻松地携带 Token。Axios 是一个流行且轻量级的库，它简化了 HTTP 请求的处理。要携带 Token，请使用 headers 选项：

import axios from 'axios';

const instance = axios.create({
  headers: {
    'Authorization': `Bearer ${token}`
  }
});

在上面的示例中，token 是一个包含用户 Token 的变量。这将确保在 Axios 发出的所有请求中都包含 Authorization 标头，其中包含 Token。

使用拦截器

Axios 还提供了拦截器，这是一种在请求发送之前或响应收到后执行自定义逻辑的机制。拦截器可以用于在每个请求中自动携带 Token：

instance.interceptors.request.use((config) => {
  config.headers['Authorization'] = `Bearer ${token}`;
  return config;
});

最佳实践

• 仅在需要时才携带 Token： 只有在需要向受保护的资源发送请求时才携带 Token。
• 存储 Token 安全： 将 Token 存储在安全的位置，例如使用 localStorage 或 sessionStorage。
• 刷新过期 Token： 实现一种机制来刷新过期的 Token，以保持用户会话。
• 错误处理： 处理未经授权的响应，并在需要时显示错误消息。
• 不要将 Token 存储在 URL 中： 将 Token 作为查询参数或 URL 片段传递是不安全的，因为它很容易受到攻击。

总结

在 Vue.js 中携带 Token 发送请求至关重要，以验证用户身份并授权他们访问受保护的资源。通过遵循本文中概述的最佳实践，您可以确保您的应用程序安全可靠地与服务器通信。