A vue front-end session plugin
$ npm install dwy-vue-session --save
< script src ="../node_modules/vue-session/dist/vue-session.js "> </ script >
import Session from 'dwy-vue-session'
var VueSession = require ( 'dwy-vue-session' ) ;
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 ( ) ;
main.js
import Vue from 'vue'
import VueSession from 'dwy-vue-session'
Vue . use ( VueSession , {
maxAge :1000 * 60 * 60 * 24 ,
prefix :'app'
} ) ;
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 >
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 >
maxAge
session expire time ,default:7200000ms
.
prefix
localstorage key prefix,default:vue-session
.
token
property,readonly;
createAt
property,readonly;
signedin
property,readonly;
regenerate
method,call it to generate session;
destroy
method,call it to destroy session;