Unable to save login session in Vue

Question

I have a login page that I can login via google, and when I login I get the parameters of the user. The problem is when I refresh the page the parameters are not saved.

This is my code:

export default {
  name: "App",
  data() {
    return {
      isLogin: false,
    };
  },
  methods: {
    async logOut() {
      const result = await this.$gAuth.signOut();
      this.isLogin = false;
      console.log(`result`, result);
    },
    async login() {
      const googleUser = await this.$gAuth.signIn();
      console.log("googleUser", googleUser);
      console.log("getId", googleUser.getId());
      console.log("getBaseProfile", googleUser.getBasicProfile());
      console.log("getAuthResponse", googleUser.getAuthResponse());
      console.log(
        "getAuthResponse$G",
        this.$gAuth.GoogleAuth.currentUser.get().getAuthResponse()
      );
      this.isLogin = this.$gAuth.isAuthorized;
    },
  },
};
</script>

As a solution I want to save the session inside a cookie, so I tried to add a dummy cookie to my code, as follow:

 <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/[email protected]/vue-cookies.js"></script>


<template>
  <div id="app">
    <button @click="login()">Login</button>
    Is login: ? {{ isLogin }}
    <button @click="logOut()">LogOut</button>
  </div>
</template>

<script>

     
// Require dependencies
var Vue = require('vue');
var VueCookie = require('vue-cookie');
// Tell Vue to use the plugin
Vue.use(VueCookie);
// From some method in one of your Vue components
this.$cookie.set('test', 'Hello world!', 1);
// This will set a cookie with the name 'test' and the value 'Hello world!' that expires in one day
// To get the value of a cookie use
this.$cookie.get('test');
// To delete a cookie use
this.$cookie.delete('test');


export default {
  name: "App",
  data() {
    return {
      isLogin: false,
    };
  },
  methods: {
    async logOut() {
      const result = await this.$gAuth.signOut();
      this.isLogin = false;
      console.log(`result`, result);
    },
    async login() {
      const googleUser = await this.$gAuth.signIn();
      console.log("googleUser", googleUser);
      console.log("getId", googleUser.getId());
      console.log("getBaseProfile", googleUser.getBasicProfile());
      console.log("getAuthResponse", googleUser.getAuthResponse());
      console.log(
        "getAuthResponse$G",
        this.$gAuth.GoogleAuth.currentUser.get().getAuthResponse()
      );
      this.isLogin = this.$gAuth.isAuthorized;
    },
  },
};
</script>

But I got Uncaught TypeError: Vue.use is not a function.

What am I doing wrong?

Is there a better way to save the login session?

Answer 1

I think you skipped this line: https://github.com/alfhen/vue-cookie#installation

Or do it the cool way and load it in your main.js/app.js

You should register that VueCookie plugin in the file where you start the Vue instance.

See: https://v2.vuejs.org/v2/guide/plugins.html