How to get `csrftoken` in Vue.js?

Question

In Vue.js project, how can I get the csrftoken?

I tried use js-cookie, but can not get it:

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 '

}

but I can get other cookie.

EDIT

Cookies.get('csrftoken')

this code get undefined.

But when I access, there is the csrftoken.

I use the debugger, in there , I console the `document.cookie`, there is no `csrftoken` and `sessionid`, when I request a api, they will appear in the Cookie in the request header. — user7693832, Mar 16 '18 at 12:22

Neha · Answer 1 · 2018-03-16T05:47:07.313

1

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

get csrf from cookies:

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

edited Mar 16 '18 at 05:47

answered Mar 16 '18 at 05:00

Neha

2,136
5
21
50

`#token`? I want to get the `csrftoken`. should change it to this? – user7693832 Mar 16 '18 at 05:03
you can get cookies with *document.cookie*. i hope this helps! – Neha Mar 16 '18 at 05:47
I am not sure whether the js-cookie store the cookie data in the document.cookie. – user7693832 Mar 16 '18 at 05:56
What if the cookie is `http-only`? – winklerrr Oct 10 '20 at 08:28

score 1 · Answer 2 · answered Mar 16 '18 at 10:28

1

Have you tried to simply print it in the DOM on the server level. The get it from there. Laravel is a good example:

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

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

Of course replace {{ csrf_token() }} with your server language and the CSRF token.

And in your JS:

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

If using jQuery.

answered Mar 16 '18 at 10:28

2Fwebd

2,005
2
15
17

it says save the `csrftoken` in the `` tag. but I use the Vue.js as the frontend. can I write like this? – user7693832 Mar 16 '18 at 11:07
so it's only in the Cookies, nowhere else? Sorry though the page was server generated in the first place and you were looking to get it on the JS side. – 2Fwebd Mar 16 '18 at 11:08
Try to console.log(Cookies.get('csrftoken')) or the Cookie object to get the right key. – 2Fwebd Mar 16 '18 at 11:09
Ohh, the `Cookies.get('csrftoken')` can not get the csrftoken. – user7693832 Mar 16 '18 at 11:11

How to get `csrftoken` in Vue.js?

2 Answers2