Axios：如何在发送 API 请求之前检查浏览器中的 cookie？

Question

目标：在浏览器代码中，在发送始终需要凭据的特定请求之前检查是否存在 cookie。

cookie 包含一个 JWT 令牌。

其他详情：

• Vue.js（用于浏览器前端代码）
• Axios（用于对后端 API 的所有 API 调用）
• JWT 令牌（在 cookie 内）
• Cookie 由创建它的服务器设置为“仅限 http”

在发送请求之前检查 cookie 是否存在是我的目标。

我看过其他帖子，包括“基于表单的网站身份验证的权威指南”(The definitive guide to form-based website authentication) 等，但它们没有涉及与浏览器代码中的 cookie 交互的任何内容。

是否可以在发送请求之前使用 Axios 拦截器来检查配置中是否存在凭据？

Answer 1

出于良好的安全原因，无法从浏览器与仅限 http 的 cookie 进行交互。

但是，我设法通过更改一个我无法确定登录状态是什么的 API 调用来解决设计需求（在发送 API 请求之前检查登录）。

Vue 商店：

Vue 存储是 SPA 存储此类标志（登录或未登录）的方便位置，但是，存储被完全擦除并随着每个 Vue 实例重新建立，这意味着一个新的浏览器窗口/ 选项卡、刷新或其他触发浏览器刷新的意外事件。

有两个潜在的解决方案，其中第二个是我在自己的 SPA 中实现的：

两种解决方案

1) 不要触碰您的后端代码。建立登录后，使用vue-cookies 让客户端浏览器设置 cookie（这将与后端 API 服务器所需的仅 http cookie 完全分开）。

此 cookie应该在浏览器刷新后仍然存在。但是，我没有使用（或尝试）这种方法，因为我不想在每次要检查登录状态时都更改前端以检查本地 cookie。

前端代码可以使用这个 cookie 来判断这个人是否仍然登录。

2) 另一种单独的方法是短路正常的后端 API 检查以进行身份​​验证仅针对该特定路由的控制器，而不针对任何其他路由.

后端“短路”的工作原理如下：

对于该特定路由的控制器方法，让它首先检查请求中是否存在用户，然后返回 200，但状态为“false”或其他一些变量也出现在成功响应。

这是违反直觉的，并且有点偏离 200 响应的含义，但这给前端 Axios 调用提供了一些可以抓住的东西，而不仅仅是标准错误响应。

注意：我称其为“短路”，因为如果后端 API 路由的控制器方法有很多代码，那么首先检查它会避免代价高昂的部分来电。

这种方法非常适合我的需求，不需要新的或辅助 API 调用。