Vue.js + axios 如何在请求头中携带 token?

在前端开发中,我们经常需要向后端发送请求来获取数据,而这些数据往往是需要身份验证的。在这种情况下,我们需要在请求头中携带 token 来进行身份验证。Vue.js 和 axios 是前端开发中常用的工具,本文将介绍如何在 Vue.js 中使用 axios 发送请求时,在请求头中携带 token。

什么是 token?

在前后端分离的开发模式中,前端和后端是通过 API 进行通信的。为了保证安全性,后端通常会对 API 进行身份验证。而 token 就是一种身份验证方式。当用户登录成功后,后端会返回一个 token,前端将这个 token 存储在客户端,并在每次请求 API 时携带这个 token,后端会根据 token 来判断用户是否已经登录,从而决定是否允许访问 API。

在 axios 中如何携带 token?

在使用 axios 发送请求时,我们可以通过设置请求头来携带 token。在 Vue.js 中,我们可以在 axios 的拦截器中设置请求头,从而在每次请求时自动携带 token。

以下是一个示例代码:

------ ----- ---- --------

---------------------- - -------------------------
-------------------------------
  ------ -- -
    ----- ----- - ------------------------------
    -- ------- -
      ---------------------------- - ------- ----------
    -
    ------ -------
  --
  ----- -- ---------------------
--

------ ------- ------

在这个示例代码中,我们首先设置了 axios 的默认 base URL,这是我们发送请求时的 API 地址。接着我们使用 axios 的拦截器,在请求发送前对请求进行拦截,判断是否有 token,如果有就在请求头中添加 Authorization 字段,字段值为 Bearer + token。

总结

本文介绍了在 Vue.js 中如何使用 axios 发送请求时,在请求头中携带 token。在前后端分离的开发模式中,使用 token 进行身份验证是一种非常常见的方式,对于前端开发人员来说,了解如何使用 axios 在请求头中携带 token 是非常重要的。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/65c97ec3add4f0e0ff349cd0