如何在Vue.js中获取`csrftoken`？

Question

在Vue.js项目中，我如何获取csrftoken？

我尝试使用js-cookie，但无法获取它：

import Cookies from 'js-cookie';

if (Cookies.get('csrftoken')!==undefined) {   // there will skip, because the Cookies.get('csrftoken') is undefined.

  config.headers['x-csrftoken']= Cookies.get('csrftoken');  // 'CSRFToken '

}

但我可以获取其他的cookie。

---

编辑

Cookies.get('csrftoken')

这段代码返回了undefined。

但是当我访问时，会出现csrftoken。

- user7693832

---

我使用调试器，在其中，我控制台输出 document.cookie，没有 csrftoken 和 sessionid，当我请求 API 时，它们将出现在请求头的 Cookie 中。 - user7693832

Answer 1

Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('value');

从cookies中获取csrf：

 function getCookie(name)
  {
    var re = new RegExp(name + "=([^;]+)");
    var value = re.exec(document.cookie);
    return (value != null) ? unescape(value[1]) : null;
  }

- Neha

---

#token？我想获取csrftoken。应该改成这样吗？ - user7693832

你可以使用 document.cookie 获取 cookies。希望这能帮到你！ - Neha

我不确定js-cookie是否将cookie数据存储在document.cookie中。 - user7693832

如果 cookie 是 http-only 的呢？ - winklerrr

Answer 2

您是否尝试在服务器级别上将其简单地打印到DOM中，然后从那里获取。 Laravel是一个很好的例子：

https://laravel.com/docs/5.6/csrf#csrf-x-xsrf-token

<meta name="csrf-token" content="{{ csrf_token() }}">

当然，请使用您的服务器语言和CSRF令牌替换{{ csrf_token() }}。

在您的JS代码中：

config.headers['x-csrftoken']=  $('meta[name="csrf-token"]').attr('content')

如果使用jQuery。

- 2Fwebd

---

它说要将 csrftoken 保存在 <meta name="csrf-token" content="{{ csrf_token() }}"> 标签中。但我使用 Vue.js 作为前端，我可以这样写吗？ - user7693832

那么它只存在于Cookies中，其他地方都没有？很抱歉，我以为页面首先是由服务器生成的，而你正在寻找JS端获取它。 - 2Fwebd

尝试使用console.log(Cookies.get('csrftoken'))或Cookie对象来获取正确的密钥。 - 2Fwebd

哦，Cookies.get('csrftoken')无法获取csrftoken。 - user7693832