How can I access vue-cookies in a vuex store?

Question

In an action, I'm doing:

this.$cookies.set("token", response.token, "7d");
this.$cookies.set("UserId", response.UserId, "7d");

But alas $cookies is not defined.

Earreach

Answer 1

You can install js-cookie library and than access cookie like this in vuex store:

import Cookies from 'js-cookie'

const getters = {
  isLoggedIn: function (state) {
    return !!state.email && !!Cookies.get('access_token')
  }
}

Schubert

Can I somehow use vue-cookies? – Earreach

js-cookie does everything I needed vue-cookies to do. In my case, there is no need to implement vue-cookies over js-cookie – Brier

Answer 2

you can do (in store.js)

import Vue from 'vue'

...

someAction () {
    Vue.prototype.$cookies.set("token", response.token, "7d");
}

Span

How reasonable is it to import Vue? – Guilbert

@PavelLevin I have been using this pattern for quite a while, and have not found any drawbacks yet. You can safely import Vue anywhere in your project. Imports are properly encapsulated when bundled. – Span

Answer 3

When using vue-cookies in your app

In your store.js, you can

import cookie from 'vue-cookies'

.....

action(){
   cookie.get('token');
}

Nureyev

Answer 4

Never ever allow a JWT cookie to be accessible by JS. This opens you up for a lot of security vulnerabilities. The accepted answer should never be implemented.

Use a http only and secure cookie only for a production application. Please redesign this part if you are building for production

Platus