In my Login.vue file, I successfully set a token cookie using the 'vue-cookies' package. The cookie is properly set and working.
However, when I try to access the same cookie in another view, I encounter the following error in the Chrome console:
Uncaught (in promise) TypeError: Cannot read property 'get' of undefined
at _callee$ (Dashboard.vue?98fa:19)
at tryCatch (runtime.js?96cf:63)
at Generator.invoke [as _invoke] (runtime.js?96cf:293)
at Generator.eval [as next] (runtime.js?96cf:118)
at asyncGeneratorStep (asyncToGenerator.js?1da1:3)
at _next (asyncToGenerator.js?1da1:25)
at eval (asyncToGenerator.js?1da1:32)
at new Promise (<anonymous>)
at eval (asyncToGenerator.js?1da1:21)
at VueComponent.getWallets (Dashboard.vue?98fa:18)
Here is an excerpt from the Login.vue component where the cookie setting takes place:
<template>
<div class="login">
<!-- Login Form HTML here -->
</div>
</template>
<script>
export default {
name: "Login",
data() {
return {
email: this.email,
password: this.password
};
},
components: {},
methods: {
async login() {
// Login method code here
// Cookie is set successfully in this component
}
}
};
</script>
Problem arises in Dashboard.vue component where the cookie retrieval fails:
<template>
<div>
<h1>This is the dashboard</h1>
</div>
</template>
<script>
export default {
name: "Dashboard",
data() {
return {
wallets: this.wallets,
user: this.user
};
},
components: {},
methods: {
async getWallets() {
var token = this.$cookies.get("token");
let config = {
headers: { Authorization: 'Bearer ' + token }
};
// Error occurs while trying to retrieve the cookie here
}
},
mounted: function() {
this.getWallets();
}
};
</script>
Lastly, here are the contents of main.js:
import Vue from "vue";
import App from "./App.vue";
// Other imports
Vue.config.productionTip = false;
new Vue({
// App initialization
}).$mount("#app");
Vue.use(VueCookies);
Vue.$cookies.config("7d");