A manage easy session storage plugin for VueJS

Overview

Install

npm install vue-easysession --save

To install the plugin, do the following:

import VueEasySession from 'vue-easysession'
Vue.use(VueEasySession.install)

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

Options

VueSession can be started with some options that will change its behavior.

  • persist A Boolean value to determine whether the data stored in the session may persist between tabs and browser instances. Defaults to false. Optional

  • keySession A String value to determine the key of the current Vue session. Defaults is vue-session-key. Optional

  • expireSessionCallback is event handler that is execute when the expiration is success. Default is undefined. Optional

Pass the options in the use method:

var options = {
    persist: true,
    keySession: 'myKeySession',
    expireSessionCallback: function () {
        window.location.href = '/'
    }
}

Vue.use(VueEasySession.install, options)

Reference Vue instance this.$session .vue

  • this.$session.getAll(), returns all data stored in the Session.

  • this.$session.set(key,value), sets a single value to the Session.

  • this.$session.get(key), returns the value attributed to the given key.

  • this.$session.start(exp : milliseconds), initializes a session with a 'session-id'. If you attempt to save a value without having started a new session, the plugin will automatically start a new session. the parameter exp is optional and indicate the time of expiration the session(millisecond)

  • this.$session.exists(), checks whether a session has been initialized or not.

  • this.$session.has(key), checks whether the key exists in the Session

  • this.$session.remove(key), removes the given key from the Session

  • this.$session.clear(), clear all keys in the Session, except for 'session-id', keeping the Session alive

  • this.$session.destroy(), destroys the Session

  • this.$session.id(), returns the 'session-id'

  • this.$session.renew(session_id), allows a user to renew a previous session by manually inputting the session_id

Reference the instance VueEasySession

You can use the session in others scripts file

import VueEasySession from 'vue-easysession'
var session = VueEasySession.getInstance()
if(session.exists()) {
  console.log(true);
}

you can add the options parameters too in the VueEasySession.getInstance(options)

Example

Your login method could look like this:

export default {
    name: 'login',
    methods: {
        login: function () {
          this.$http.post('URL', {
            password: this.password,
            username: this.username
          }).then(function (response) {
            if (response.status === 200 && 'token' in response.body) {
              this.$session.start()
              this.$session.set('jwt', response.body.token)
              Vue.http.headers.common['Authorization'] = 'Bearer ' + response.body.token
              this.$router.push('/home')
            }
          }, 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: 'panel',
  data () {
    return { }
  },
  beforeCreate: function () {
    if (!this.$session.exists()) {
      this.$router.push('/')
    }
  },
  methods: {
    logout: function () {
      this.$session.destroy()
      this.$router.push('/')
    }
  }
}

This library is based for the repository vue-session of victorsferreira https://github.com/victorsferreira/vue-session

You might also like...
A plugin for syncing Vuex store with js-data

vuex-jsdata-plugin A simple attempt to help using jsdata alongside Vue.js: This plugin syncing Vuex store with js-data After each injection made by js

Vuex plugin for redux-saga

vuex-coolstory Use redux-saga with Vuex. Overview redux-saga is an awesome library that aims to make side effects (i.e. asynchronous things like data

vuex plugin

vuex-local-state inject localStorage to vuex Installation $ npm install vuex-local-state --save API new VuexLocalState(storeOptions, [conf]); conf def

💾 A State Snapshot plugin on Actions/Mutations for Vuex3.1+.

Vuex Stateshot 💾 A State Snapshot plugin on Actions/Mutations for Vuex3.1+. Installation npm i vuex-stateshot -S or yarn add vuex-stateshot -S Demo S

A tiny Vue plugin that connects components with Redux

redux-connect-vue **Note: redux-connect-vue v3 is compatible with Vue 3.x. If you are looking for a Vue 2.x compatible version, check out v2 A tiny Vu

A tiny Vue plugin that connects Vue Router with Redux
A tiny Vue plugin that connects Vue Router with Redux

redux-first-vue-routing A tiny Vue plugin that connects Vue Router with Redux, an implementation of redux-first-routing. New to Redux? Start Here Achi

A plugin can redo, undo deep nested JSON. Vue and React friendly.

json-history A plugin can redo, undo deep nested JSON. Vue or React friendly. Support Date as value but regex and function min+gzipped 12.2kB uses goo

A very simple but powerful state management for vuejs projects.
A very simple but powerful state management for vuejs projects.

Vuez A Simple but Powerful State Management for Vue.js projects. Vuez is a very simple but powerful state management library for Vue.js projects. Vuez

:rabbit2: A tiny, light and handy state management for vuejs 2, writing less verbose code.

revuejs 🐇 A tiny, light and handy state management for vuejs 2, writing less verbose code. Installation Install the pkg with npm: npm install revuejs

Comments
  • How to check if session exists globally

    How to check if session exists globally

    In the documentation, to check if a session exists on a component, we need to do:

     beforeCreate: function () {
        if (!this.$session.exists()) {
          this.$router.push('/')
        }
    

    This will check if a session exists, else redirect back to homepage.

    I have many components, and doing this on each of them feels like WET code, so I decided to do it on the router.js file

    import VueEasySession from 'vue-easysession'
    var session = VueEasySession.getInstance()
    if(!session.exists()) {
       next('/')
         } else {
          next();
        }
    }
    

    It isn't working and I'm getting an error: [vue-router] uncaught error during route navigation: Invalid Object with a dropdown of many files

    good first issue 
    opened by peoray 3
Owner
Andres
use JavaScript, .NET, Xamarin for Web and App development, Software Dev. Engineer at Redarbor
Andres
:hammer: Utilities for vuex to easily create and manage actions.

vuex-action Utilities for vuex to easily create and manage actions. Allow you to create untyped action Support for Promise Work with [email protected] and [email protected] I

varHarrie 27 Mar 26, 2021
A light and easy shared state management plugin for Vue

vue-shared vue-shared is a tiny (~150 lines) vue plugin for shared state management, that can be used as an alternative to Vuex. It adds a new vue opt

null 11 Jan 22, 2021
The Vuex plugin to enable Object-Relational Mapping access to the Vuex Store.

Vuex ORM ?? HEADS UP! Currently, Vuex ORM Next project is on going, and we are hoping it is going to be the foundation of the version 1.0.0 release. W

Vuex ORM 2.4k Dec 29, 2022
A Vuex plugin to persist the store. (Fully Typescript enabled)

vuex-persist A Typescript-ready Vuex plugin that enables you to save the state of your app to a persisted storage like Cookies or localStorage. Info :

Arnav Gupta 1.6k Dec 30, 2022
🔐 A simple Vue plugin to include a Google sign-in button into your web app.

vue-google-signin-button A simple Vue plugin to include a Google sign-in button into your web app. Install This plugin can be installed as a module $

Phan An 288 Oct 17, 2022
A simple plugin to include a custom Facebook sign-in button into your web app.

vue-facebook-signin-button A simple Vue plugin to include a custom Facebook sign-in button into your web app. Install This plugin can be installed as

Phan An 135 May 25, 2022
Vue and Vuex plugin to persistence data with localStorage/sessionStorage

vuejs-storage Vue.js and Vuex plugin to persistence data with localStorage/sessionStorage Purpose This plugin provide a simple binding with localStora

maple 119 Dec 15, 2022
Vue plugin for using Microsoft Authentication Library (MSAL)

vue-msal Wrapper of MSAL.js (Microsoft Authentication Library) for usage in Vue. The vue-msal library enables client-side vue applications, running in

null 112 Dec 17, 2022
💾🔗🖥️ Share, synchronize and persist state between multiple tabs with this plugin for Vuex. TypeScript types included.

vuex-multi-tab-state This Vuex plugin allows you to sync and share the status of your Vue application across multiple tabs or windows using the local

Gabriel Martín Blázquez 155 Nov 19, 2022
Vue auth plugin with typescript

?? Vue Auth Plugin A simple authentication and authorization library for Vue.js using typescript Inspired in @websanova/vue-auth Pull requests and iss

d0wHc3r 57 Nov 10, 2022