├── .gitignore ├── package.json ├── README.md ├── index.js ├── index.unpkg.js └── index.esm.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-session", 3 | "version": "0.9.9", 4 | "description": "A simplistic session plugin for VueJS backed by SessionStorage", 5 | "main": "index.js", 6 | "unpkg": "index.unpkg.js", 7 | "esm": "index.esm.js", 8 | "scripts": { 9 | "test": "echo \"Error: no test specified\" && exit 1" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "https://github.com/victorsferreira/vue-session" 14 | }, 15 | "keywords": [ 16 | "vue", 17 | "vuejs", 18 | "session", 19 | "plugin", 20 | "vue-plugin" 21 | ], 22 | "author": "Victor Ferreira ", 23 | "license": "ISC" 24 | } 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | To install the plugin, do the following: 2 | 3 | ```javascript 4 | import VueSession from 'vue-session' 5 | Vue.use(VueSession) 6 | ``` 7 | 8 | Now you can use it in your components with the `$session` property. 9 | 10 | ## Options 11 | 12 | VueSession can be started with some options that will change its behavior. 13 | 14 | - `persist` A Boolean value to determine whether the data stored in the session may persist between tabs and browser instances. Defaults to `false`. 15 | 16 | Pass the options in the `use` method: 17 | 18 | ```javascript 19 | var options = { 20 | persist: true 21 | } 22 | 23 | Vue.use(VueSession, options) 24 | ``` 25 | 26 | ## Reference 27 | 28 | - `this.$session.getAll()`, returns all data stored in the Session. 29 | - `this.$session.set(key,value)`, sets a single value to the Session. 30 | - `this.$session.get(key)`, returns the value attributed to the given key. 31 | - `this.$session.start()`, 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. 32 | - `this.$session.exists()`, checks whether a session has been initialized or not. 33 | - `this.$session.has(key)`, checks whether the key exists in the Session 34 | - `this.$session.remove(key)`, removes the given key from the Session 35 | - `this.$session.clear()`, clear all keys in the Session, except for 'session-id', keeping the Session alive 36 | - `this.$session.destroy()`, destroys the Session 37 | - `this.$session.id()`, returns the 'session-id' 38 | - `this.$session.renew(session_id)`, allows a user to renew a previous session by manually inputting the session_id 39 | 40 | ### Flash 41 | 42 | Flash allows you to save data until you read them without having to start a regular Session. 43 | 44 | - `this.$session.flash.set(key, value)`, sets a flash value 45 | - `this.$session.flash.get(key)`, reads and removes a flash value 46 | - `this.$session.flash.remove(key)`, removes a flash value 47 | 48 | 49 | ## Example 50 | 51 | Your login method could look like this: 52 | 53 | ```javascript 54 | export default { 55 | name: 'login', 56 | methods: { 57 | login: function () { 58 | this.$http.post('http://somehost/user/login', { 59 | password: this.password, 60 | email: this.email 61 | }).then(function (response) { 62 | if (response.status === 200 && 'token' in response.body) { 63 | this.$session.start() 64 | this.$session.set('jwt', response.body.token) 65 | Vue.http.headers.common['Authorization'] = 'Bearer ' + response.body.token 66 | this.$router.push('/panel/search') 67 | } 68 | }, function (err) { 69 | console.log('err', err) 70 | }) 71 | } 72 | } 73 | } 74 | ``` 75 | 76 | In your logged-in area, you can check whether or not a session is started and destroy it when the user wants to logout: 77 | 78 | ```javascript 79 | export default { 80 | name: 'panel', 81 | data () { 82 | return { } 83 | }, 84 | beforeCreate: function () { 85 | if (!this.$session.exists()) { 86 | this.$router.push('/') 87 | } 88 | }, 89 | methods: { 90 | logout: function () { 91 | this.$session.destroy() 92 | this.$router.push('/') 93 | } 94 | } 95 | } 96 | ``` 97 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var STORAGE = null; 2 | var VueSession = { 3 | key: 'vue-session-key', 4 | flash_key: 'vue-session-flash-key', 5 | setAll: function(all){ 6 | STORAGE.setItem(VueSession.key,JSON.stringify(all)); 7 | } 8 | } 9 | 10 | VueSession.install = function(Vue, options) { 11 | if(options && 'persist' in options && options.persist) STORAGE = window.localStorage; 12 | else STORAGE = window.sessionStorage; 13 | Vue.prototype.$session = { 14 | flash: { 15 | parent: function(){ 16 | return Vue.prototype.$session; 17 | }, 18 | get: function(key){ 19 | var all = this.parent().getAll(); 20 | var all_flash = all[VueSession.flash_key] || {}; 21 | 22 | var flash_value = all_flash[key]; 23 | 24 | this.remove(key); 25 | 26 | return flash_value; 27 | }, 28 | set: function(key, value){ 29 | var all = this.parent().getAll(); 30 | var all_flash = all[VueSession.flash_key] || {}; 31 | 32 | all_flash[key] = value; 33 | all[VueSession.flash_key] = all_flash; 34 | 35 | VueSession.setAll(all); 36 | }, 37 | remove: function(key){ 38 | var all = this.parent().getAll(); 39 | var all_flash = all[VueSession.flash_key] || {}; 40 | 41 | delete all_flash[key]; 42 | 43 | all[VueSession.flash_key] = all_flash; 44 | VueSession.setAll(all); 45 | } 46 | }, 47 | getAll: function(){ 48 | var all = JSON.parse(STORAGE.getItem(VueSession.key)); 49 | return all || {}; 50 | }, 51 | set: function(key,value){ 52 | if(key == 'session-id') return false; 53 | var all = this.getAll(); 54 | 55 | if(!('session-id' in all)){ 56 | this.start(); 57 | all = this.getAll(); 58 | } 59 | 60 | all[key] = value; 61 | 62 | VueSession.setAll(all); 63 | }, 64 | get: function(key){ 65 | var all = this.getAll(); 66 | return all[key]; 67 | }, 68 | start: function(){ 69 | var all = this.getAll(); 70 | all['session-id'] = 'sess:'+Date.now(); 71 | 72 | VueSession.setAll(all); 73 | }, 74 | renew: function(sessionId){ 75 | var all = this.getAll(); 76 | all['session-id'] = 'sess:' + sessionId; 77 | VueSession.setAll(all); 78 | }, 79 | exists: function(){ 80 | var all = this.getAll(); 81 | return 'session-id' in all; 82 | }, 83 | has: function(key){ 84 | var all = this.getAll(); 85 | return key in all; 86 | }, 87 | remove: function(key){ 88 | var all = this.getAll(); 89 | delete all[key]; 90 | 91 | VueSession.setAll(all); 92 | }, 93 | clear: function(){ 94 | var all = this.getAll(); 95 | 96 | VueSession.setAll({'session-id': all['session-id']}); 97 | }, 98 | destroy: function(){ 99 | VueSession.setAll({}); 100 | }, 101 | id: function(){ 102 | return this.get('session-id'); 103 | } 104 | } 105 | }; 106 | 107 | module.exports = VueSession; 108 | -------------------------------------------------------------------------------- /index.unpkg.js: -------------------------------------------------------------------------------- 1 | var STORAGE = null; 2 | var VueSession = { 3 | key: 'vue-session-key', 4 | flash_key: 'vue-session-flash-key', 5 | setAll: function(all){ 6 | STORAGE.setItem(VueSession.key,JSON.stringify(all)); 7 | } 8 | } 9 | 10 | VueSession.install = function(Vue, options) { 11 | if(options && 'persist' in options && options.persist) STORAGE = window.localStorage; 12 | else STORAGE = window.sessionStorage; 13 | Vue.prototype.$session = { 14 | flash: { 15 | parent: function(){ 16 | return Vue.prototype.$session; 17 | }, 18 | get: function(key){ 19 | var all = this.parent().getAll(); 20 | var all_flash = all[VueSession.flash_key] || {}; 21 | 22 | var flash_value = all_flash[key]; 23 | 24 | this.remove(key); 25 | 26 | return flash_value; 27 | }, 28 | set: function(key, value){ 29 | var all = this.parent().getAll(); 30 | var all_flash = all[VueSession.flash_key] || {}; 31 | 32 | all_flash[key] = value; 33 | all[VueSession.flash_key] = all_flash; 34 | 35 | VueSession.setAll(all); 36 | }, 37 | remove: function(key){ 38 | var all = this.parent().getAll(); 39 | var all_flash = all[VueSession.flash_key] || {}; 40 | 41 | delete all_flash[key]; 42 | 43 | all[VueSession.flash_key] = all_flash; 44 | VueSession.setAll(all); 45 | } 46 | }, 47 | getAll: function(){ 48 | var all = JSON.parse(STORAGE.getItem(VueSession.key)); 49 | return all || {}; 50 | }, 51 | set: function(key,value){ 52 | if(key == 'session-id') return false; 53 | var all = this.getAll(); 54 | 55 | if(!('session-id' in all)){ 56 | this.start(); 57 | all = this.getAll(); 58 | } 59 | 60 | all[key] = value; 61 | 62 | VueSession.setAll(all); 63 | }, 64 | get: function(key){ 65 | var all = this.getAll(); 66 | return all[key]; 67 | }, 68 | start: function(){ 69 | var all = this.getAll(); 70 | all['session-id'] = 'sess:'+Date.now(); 71 | 72 | VueSession.setAll(all); 73 | }, 74 | renew: function(sessionId){ 75 | var all = this.getAll(); 76 | all['session-id'] = 'sess:' + sessionId; 77 | VueSession.setAll(all); 78 | }, 79 | exists: function(){ 80 | var all = this.getAll(); 81 | return 'session-id' in all; 82 | }, 83 | has: function(key){ 84 | var all = this.getAll(); 85 | return key in all; 86 | }, 87 | remove: function(key){ 88 | var all = this.getAll(); 89 | delete all[key]; 90 | 91 | VueSession.setAll(all); 92 | }, 93 | clear: function(){ 94 | var all = this.getAll(); 95 | 96 | VueSession.setAll({'session-id': all['session-id']}); 97 | }, 98 | destroy: function(){ 99 | VueSession.setAll({}); 100 | }, 101 | id: function(){ 102 | return this.get('session-id'); 103 | } 104 | } 105 | }; 106 | 107 | if(typeof window !== 'undefined' && window.Vue){ 108 | window.VueSession = VueSession; 109 | window.Vue.use(VueSession); 110 | } 111 | -------------------------------------------------------------------------------- /index.esm.js: -------------------------------------------------------------------------------- 1 | var STORAGE = null; 2 | var VueSession = { 3 | key: 'vue-session-key', 4 | flash_key: 'vue-session-flash-key', 5 | setAll: function(all){ 6 | STORAGE.setItem(VueSession.key,JSON.stringify(all)); 7 | } 8 | } 9 | 10 | VueSession.install = function(Vue, options) { 11 | if(options && 'persist' in options && options.persist) STORAGE = window.localStorage; 12 | else STORAGE = window.sessionStorage; 13 | Vue.prototype.$session = { 14 | flash: { 15 | parent: function(){ 16 | return Vue.prototype.$session; 17 | }, 18 | get: function(key){ 19 | var all = this.parent().getAll(); 20 | var all_flash = all[VueSession.flash_key] || {}; 21 | 22 | var flash_value = all_flash[key]; 23 | 24 | this.remove(key); 25 | 26 | return flash_value; 27 | }, 28 | set: function(key, value){ 29 | var all = this.parent().getAll(); 30 | var all_flash = all[VueSession.flash_key] || {}; 31 | 32 | all_flash[key] = value; 33 | all[VueSession.flash_key] = all_flash; 34 | 35 | VueSession.setAll(all); 36 | }, 37 | remove: function(key){ 38 | var all = this.parent().getAll(); 39 | var all_flash = all[VueSession.flash_key] || {}; 40 | 41 | delete all_flash[key]; 42 | 43 | all[VueSession.flash_key] = all_flash; 44 | VueSession.setAll(all); 45 | } 46 | }, 47 | getAll: function(){ 48 | var all = JSON.parse(STORAGE.getItem(VueSession.key)); 49 | return all || {}; 50 | }, 51 | set: function(key,value){ 52 | if(key == 'session-id') return false; 53 | var all = this.getAll(); 54 | 55 | if(!('session-id' in all)){ 56 | this.start(); 57 | all = this.getAll(); 58 | } 59 | 60 | all[key] = value; 61 | 62 | VueSession.setAll(all); 63 | }, 64 | get: function(key){ 65 | var all = this.getAll(); 66 | return all[key]; 67 | }, 68 | start: function(){ 69 | var all = this.getAll(); 70 | all['session-id'] = 'sess:'+Date.now(); 71 | 72 | VueSession.setAll(all); 73 | }, 74 | renew: function(sessionId){ 75 | var all = this.getAll(); 76 | all['session-id'] = 'sess:' + sessionId; 77 | VueSession.setAll(all); 78 | }, 79 | exists: function(){ 80 | var all = this.getAll(); 81 | return 'session-id' in all; 82 | }, 83 | has: function(key){ 84 | var all = this.getAll(); 85 | return key in all; 86 | }, 87 | remove: function(key){ 88 | var all = this.getAll(); 89 | delete all[key]; 90 | 91 | VueSession.setAll(all); 92 | }, 93 | clear: function(){ 94 | var all = this.getAll(); 95 | 96 | VueSession.setAll({'session-id': all['session-id']}); 97 | }, 98 | destroy: function(){ 99 | VueSession.setAll({}); 100 | }, 101 | id: function(){ 102 | return this.get('session-id'); 103 | } 104 | } 105 | }; 106 | 107 | if(typeof window !== 'undefined' && window.Vue){ 108 | window.VueSession = VueSession; 109 | window.Vue.use(VueSession); 110 | } 111 | 112 | export default VueSession; 113 | --------------------------------------------------------------------------------