Storing Session Data with the Vue Session Plugin

Storing session data can be made easier with the Vue Session plugin

In this article, we’ll look at how to use the vue-authenticate plugin to add authentication.

Getting Started

We install the package by running:

npm i vue-session

Then we can register in main.js by writing:

import Vue from "vue";
import App from "./App.vue";
import VueSession from "vue-session";
Vue.use(VueSession);
Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App)
}).$mount("#app");

Then we can use it by writing:

<template>
  <div>
    <form @submit.prevent="login">
      <input v-model="email" type="text" placeholder="email">
      <input v-model="password" type="password" placeholder="password">
      <br>
      <input type="submit" value="log in">
    </form>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      email: "",
      password: ""
    };
  },
  methods: {
    async login() {
      const { email, password } = this;
      const {
        data: { token }
      } = await axios.post(
        "https://ClosedThirdPixels--five-nine.repl.co/auth/login",
        {
          password: password,
          email: email
        }
      );
      this.$session.start();
      this.$session.set("jwt", token);
    }
  }
};
</script>

We created a form to let us log in.

In the login method, we make a POST request with Axios.

Once it succeeds, we call the $session.start method to create the session.

Our back end can be something like:

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors')

const app = express();
app.use(cors())
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.post('/auth/login', (req, res) => {
  res.json({
    token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c'
  })
});

app.post('/auth/register', (req, res) => {
  res.json({})
});

app.listen(3000, () => console.log('server started'));

to return the token.

We would return a token only when the username and password are valid.

And then we can populate it with our own key-value pairs.

To get the data from the session, we can use the this.$session.get method.

For example, we can write:

$session.get('jwt')

to get the session data with the jwt key.

To check if the session exists, we call this.$session.exists() .

To remove something with the given key, we call this.$session.remove() .

To clear all the data, we call this.$session.clear() .

this.$session.id() returns the session ID.

this.$session.renew() renews the session.

this.$session.destroy() destroys a session.

So we can write:

<template>
  <div>
    <form @submit.prevent="login">
      <input v-model="email" type="text" placeholder="email">
      <input v-model="password" type="password" placeholder="password">
      <br>
      <input type="submit" value="log in">
      <button type="button" @click="logout">log out</button>
    </form>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      email: "",
      password: ""
    };
  },
  methods: {
    async login() {
      const { email, password } = this;
      const {
        data: { token }
      } = await axios.post(
        "https://ClosedThirdPixels--five-nine.repl.co/auth/login",
        {
          password: password,
          email: email
        }
      );
      this.$session.start();
      this.$session.set("jwt", token);
    },
    logout() {
      this.$session.destroy();
    }
  }
};
</script>

to add a logout method to destroy the session with this.session.$destroy() .

Flash

We can use the flash property to save data until we read them without having to start a regular session.

this.$session.flash.set(key, value) sets a flash value.

this.$session.flash.get(key) reads and removes a flash value.

this.$session.flash.remove(key) removes a flash value.

Conclusion

Vue Session is an easy to use library for storing sessions within a Vue app.