Giter Site home page Giter Site logo

vue-session's Introduction

VueSession

A vue front-end session plugin

Install

$ npm install dwy-vue-session --save

Import

script
<script src="../node_modules/vue-session/dist/vue-session.js"></script>
es2015
  import Session from 'dwy-vue-session'
cmd
  var VueSession=require('dwy-vue-session');

Usage

import VueSession from 'dwy-vue-session'

//in main.js,mount Session's instance to Vue's prototype via Vue.use
//then you can access session via every Vue's instance
Vue.use(Session);

//when signedin,
//call instance method regenerate to generate session;
this.$session.regenerate(token);


//judge signin state
if(this.$session.signedin){
  //do something
}

//when signout,call method destroy to destroy the session;
this.$session.destroy();

Example

  1. main.js
import Vue from 'vue'
import VueSession from 'dwy-vue-session'

Vue.use(VueSession,{
  maxAge:1000*60*60*24,
  prefix:'app'
});
  1. signin.vue
<script>
  import AuthService from '../auth.service'
  
  export default{
    data(){
      return {
        username:'',
        password:''
      }
    },
    method:{
      onSubmit(){
        let {username,password}=this;
        AuthService.signin(username,password)
        .then(token=>{
          this.$session.regenerate(token);
        });
      }
    }
  }
</script>
  1. profile.vue
<script>
  import VueSession from 'dwy-vue-session'
  import AuthService from '../auth.service'
  export default{
      data(){
        return {
          profile:null
        }
      },
      beforeRouteEnter(to,from,next){
        //in beforeRouteEnter hook
        //we can not access `this`
        //but can access session via Session's static method `getInstance`
        let session=VueSession.getInstance();
        if(session.signedin){
          return next();
        }
        next('/signin');
      },
      methods:{
        onSignoutButtonClick(){
          AuthService.signout()
            .then(()=>{
              this.$session.destroy();
              this.$router.push('/signin');
            });
        }
      }
    }
</script>

API

constructor params;

  1. maxAge session expire time ,default:7200000ms.
  2. prefix localstorage key prefix,default:vue-session.

instance

  1. token property,readonly;
  2. createAt property,readonly;
  3. signedin property,readonly;
  4. regenerate method,call it to generate session;
  5. destroy method,call it to destroy session;

Test

$ npm test

vue-session's People

Contributors

parox2014 avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.