如何从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()}}而不是确定如何在阿多尼斯上做。然后，您将从vuejs上的window对象获取它。 window._csrf