如何从 VueJs 中的 AdonisJs 获取 CSRF 令牌？

Question

我在一个项目上工作，它有一个用 AdonisJS 制作的 API 和一个用 VueJS 制作的前端。

API 和前端是独立的，前端通过 axios 调用消耗 API。

我正在尝试从前端使用 axios 发出 POST 请求，但由于缺少 csrf 令牌，该请求发送了 403 响应。

在带有 Edge 模板的“经典”Adonis 项目中，我知道如何使用{{ csrfField() }}获取 csrf 令牌。 但是，在前端独立于 API 的情况下，我该如何实现呢？

我试图创建一个路由/csrf从会话发送令牌：

async csrf ({response, session}) { return response.json({token: session.get('csrf-secret')}) }

然后在 Vue 中，我进行了第一个 axios 调用以从该路由中获取令牌，然后将令牌传递给第二个 axios 后调用。

但是这个解决方案不起作用（我认为因为它不是同一个会话，所以，不是同一个标记）顺便说一下，我发现这个方法不是很干净。

那么，有没有人知道如何做到这一点？

Answer 1

我不了解阿多尼斯，但由于阿多尼斯与Laravel相似，因此您可以按照自己的方式来做。 在Laravel上，有用于Web和api的路由文件。 Web需要csrf_token，而API不需要，因此基本上您可以将路由放在API上，但是您没有会话等。另一种方法是在包含vuejs组件的布局文件上设置一个全局window._csrf={{csrf_token()}}不确定如何在adonis上完成。 然后，您将从vuejs上的window对象获取它。 window._csrf

Answer 2

https://www.npmjs.com/package/universal-cookie通用 cookie 有助于设置和获取服务器端和客户端的值

import Cookies from 'universal-cookie';
 
const cookies = new Cookies();
 
cookies.set('csrf', 'mytoken', { path: '/' });
console.log(cookies.get('csrf'));