INSTALL

npm install v-session

USE

import V_Session from "v-session";
Vue.use(V_Session);

Now you can use it in your components with the $v_session property.

Reference

• this.$v_session.gets(), returns all data stored in the Session.
• this.$v_session.set(key,value), sets a single value to the Session.
• this.$v_session.get(key), returns the value attributed to the given key.
• this.$v_session.exists(), checks whether a session has been initialized or not.
• this.$v_session.has(key), checks whether the key exists in the Session
• this.$v_session.remove(key), removes the given key from the Session
• this.$v_session.clear(), clear all keys in the Session, except for 'session-id', keeping the Session alive
• this.$v_session.destroy(), clear all keys in the Session, keeping the Session alive

OPTIONS

V_Session has the following configuration options..

Name	Type	Description
unique	Boolean	A Boolean value to determine whether the data stored in the session may persist between tabs and browser instances Defaults to false.
expire	Int	An Int value to determine the lifetime of the session after closing the browser, the value is defined in minutes. Defaults to (10).
inactive	Int	An Int value to determine the lifetime of the session if the user is inactive, the value is defined in minutes. Defaults to null.
encrypt	Boolean	An Int value to determine if the session information is encrypted. Defaults to false.
secret_key	String	An Int value to determine the keyword for the encryption of session information.. Defaults to null.

Pass the options in the use method:

var options = {
  unique: false,
  expire: 5,
  inactive: 3,
  encrypt: true,
  secret_key: "Hello World"
};

Vue.use(V_Session, options);

Example

Your login method could look like this:

export default {
  name: "login",
  data: function() {
    return {
      email: "",
      password: ""
    };
  },
  methods: {
    login: function() {
      this.$http
        .post("https://example/user/login", {
          password: this.password,
          email: this.email
        })
        .then(
          function(response) {
            if (response.status === 200 && "token" in response.body) {
              this.$v_session.set("jwt", response.body.token);
              this.$v_session.set("username", response.body.username);
              Vue.http.headers.common["Authorization"] =
                "Soport " + response.body.token;
              this.$router.push("/dashboard/");
            }
          },
          function(err) {
            console.log("err", err);
          }
        );
    }
  }
};

In your logged-in area, you can check whether or not a session is started and destroy it when the user wants to logout:

export default {
  name: "dashboard",
  data() {
    return {
      username: null
    };
  },
  beforeCreate: function() {
    if (!this.$v_session.exists()) {
      this.$router.push("/");
    }
  },
  mounted() {
    this.username = this.$v_session.get("username");
  },
  methods: {
    logout: function() {
      this.$v_session.clear();
      this.$router.push("/");
    }
  }
};