Axios:如何在发送API请求之前在浏览器中检查cookie? [英] Axios: How to check for cookie in browser before sending API request?

问题描述

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

Goal: In the browser code, check that a cookie is present before sending a specific request that always requires credentials.

cookie包含JWT令牌.

The cookie contains a JWT token.

其他详细信息:

• Vue.js(用于浏览器中的前端代码)
• Axios(用于对后端API的所有API调用)
• JWT令牌(在cookie内)
• 将Cookie设置为仅http"由创建它的服务器

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

Checking for cookie existence prior to sending a request is my goal.

我看了其他帖子，包括《基于表单的网站身份验证的权威指南》， (基于表单的网站身份验证的权威指南) ，等等，但是它们没有解决与浏览器代码中的Cookie交互的任何问题.

I've taken a look at other posts, including the "definitive guide to form based website authentication" (The definitive guide to form-based website authentication), among others, but they do not address anything about interacting with cookies in the browser code.

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

Is it possible to use an Axios interceptor to check for existence of credentials in config prior to sending the request?

推荐答案

出于良好的安全原因，无法与浏览器中的仅HTTP cookie进行交互.

It's not possible to interact with an http-only cookie from the browser, and for good security reasons.

但是，我设法通过更改一个我不知道登录状态是什么的API调用来解决设计需求(在发送API请求之前检查登录).

However, I managed to resolve the design need (checking for login prior to sending API request) by altering the one API call where I would not know for certain what the login status is.

Vue商店:

Vue存储区是SPA存储此类标志(无论是否已登录)的便捷位置，但是，该存储区已被完全删除并随每个Vue实例重新建立，这意味着一个新的浏览器窗口/标签，刷新或触发浏览器刷新的其他意外事件.

The Vue store is meant to be a convenient location for an SPA to store such a flag (logged in or not), however, the store is completely erased and re-established with each Vue instance, which means a new browser window / tab, refresh, or other unexpected event that triggers a browser refresh.

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

There are two potential solutions, the second of which of which I've implemented in my own SPA:

两种解决方案

1)请勿触摸您的后端代码.使用 vue-cookies ，一旦建立登录，客户端浏览器就会设置cookie. (这将与后端API服务器所需的纯HTTP cookie完全分开).

1) Don't touch your back end code. Use vue-cookies to have the client browser set a cookie once a login has been established (this would be completely separate from the http-only cookie that the back-end API server needs).

刷新浏览器后，该cookie 应该仍然存在.但是，我没有使用(或尝试)这种方法，因为我不想每次都想检查登录状态时都改变自己的前端以检查本地cookie.

This cookie should still exist after a browser refresh. I did not use (or try) this approach, however, as I didn't want to mess around with altering my front-end to check a local cookie each time I want to check for login status.

前端代码可以使用此cookie来确定此人是否仍在登录.

The front end code could use this cookie to figure out if the person is still logged in or not.

2)另一种单独的方法是仅对特定路由的控制器短路常规后端API检查以进行身份​​验证

2) Another, separate approach is to short-circuit the normal back-end API check for authentication only for that specific route's controller, but not for any other route.

以下是后端短路"的工作原理:

Here's how a 'short-circuit' on the back-end would work:

在该特定路线的控制器方法的情况下，首先让它检查请求中用户的存在，然后返回200，但状态为假".或也显示在成功响应中的其他变量.

In the case of that specific route's controller method, have it first check for existence of the user in the request, and then return a 200 but with a status of "false" or some other variable which also appears in the success response.

这是违反直觉的，并且会从200响应的含义中偏离，但这给了Axios前端调用一些东西，而不仅仅是标准错误响应.

It's counter-intuitive, and sort of strays from the meaning of a 200 response, but this gives the front end Axios call something to grab onto other than just a standard error response.

注意:我称其为短路"，因为如果后端API路由的controller方法具有大量代码，则首先检查它会做的事情将避免调用的昂贵部分.

NOTE: I call it a "short-circuit" because if the back-end API route's controller method has a lot of code, making this check the FIRST thing it does will avoid the costly part of the call.

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

This approach works perfectly for my needs and doesn't require a new or secondary API call.

这篇关于Axios:如何在发送API请求之前在浏览器中检查cookie?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！