From a09b976589fcc575f67e3dd96f76f4fb2c00b7c8 Mon Sep 17 00:00:00 2001 From: Ali Lozano Date: Sun, 30 Jun 2019 11:33:21 -0500 Subject: [PATCH] Improved SSR support + docs --- README.md | 80 ++++++++++++++++++++ dist/vue-authenticate.common.js | 4 +- dist/vue-authenticate.es2015.js | 4 +- dist/vue-authenticate.js | 4 +- dist/vue-authenticate.min.js | 2 +- example/vue-authenticate.js | 4 +- package-lock.json | 125 +++++++++++++++++++++++--------- package.json | 18 ++++- src/globals.js | 4 +- 9 files changed, 198 insertions(+), 47 deletions(-) diff --git a/README.md b/README.md index 64eafaf..5834bc9 100644 --- a/README.md +++ b/README.md @@ -233,6 +233,86 @@ Vue.use(VueAuthenticate, { ``` +### SSR Support + +You can use this library on the server side without problems by following the steps below. + +1. You must configure the storage as 'cookieStorage', adding to your VueAuthenticate configuration `storageType:' cookieStorage'`. +2. You have to stop using Vue.use(VueAuthenticate) globally, instead, you have to use `VueAuthenticate.factory()` +3. On the server you have to build your own storage (cookie storage will not work) or use the StorageMemory. +4. You have to consider having an instance of axios for each of the requests. + +Here an example with plugins of [!UVue](https://github.com/universal-vue/uvue) + +Axios Plugin: + +```javascript +import axios from 'axios'; + +import cookies from 'js-cookie'; // only browser + +/** + * This plugin create an axios HTTP client to do request. + */ + +export default { + async beforeCreate(context, inject) { + // Create axios client + const httpClient = axios.create({ + // Change API url: depends on server side or client side + baseURL: '/api/v1', + }); + + // Inject httpClient eveywhere + inject('http', httpClient); + inject('axios', httpClient); + + // You can use it everywhere in your app: + // - In UVue context: `context.$http.get(...)` + // - In your components: `this.$http.get(...)` + // - In your store actions: `this.$http.get(...)` + }, +}; + +``` + +VueAuthenticate Plugin + +```javascript +import VueAuthenticate from 'vue-authenticate/dist/vue-authenticate'; + +const vueAuthenticateConfig = { + // ... + tokenPrefix: undefined, + tokenName: 'token', + storageType: 'cookieStorage', // Important. + // ... +}; + +export default { + async beforeCreate(context, inject) { + let vueAuthInstance; + if (process.client) { // browser + vueAuthInstance = VueAuthenticate.factory(context.$http, vueAuthenticateConfig); + } else { // server + const vueConfig = { ...vueAuthenticateConfig, storageType: 'memoryStorage' }; // Override with memory storage + const { tokenName } = vueConfig; // get the token name + const accessToken = context.req.cookies[tokenName]; // Get the access token from request + + vueAuthInstance = VueAuthenticate.factory(context.$http, vueConfig); + vueAuthInstance.storage.setItem(tokenName, accessToken); // set the current access token + } + + inject('auth', vueAuthInstance); // Inject auth eveywhere + + // You can use it everywhere in your app: + // - In UVue context: `context.$auth.isAuthenticated(...)` + // - In your components: `this.$auth.isAuthenticated(...)` + // - In your store actions: `this.$auth.isAuthenticated(...)` + }, +}; +``` + ## License The MIT License (MIT) diff --git a/dist/vue-authenticate.common.js b/dist/vue-authenticate.common.js index ad37114..72b3867 100644 --- a/dist/vue-authenticate.common.js +++ b/dist/vue-authenticate.common.js @@ -521,11 +521,11 @@ var fakeWindow = { }, }; -var $document = (typeof document !== undefined) +var $document = (typeof document !== 'undefined') ? document : fakeDocument; -var $window = (typeof window !== undefined) +var $window = (typeof window !== 'undefined') ? window : fakeWindow; diff --git a/dist/vue-authenticate.es2015.js b/dist/vue-authenticate.es2015.js index c148427..042eb06 100644 --- a/dist/vue-authenticate.es2015.js +++ b/dist/vue-authenticate.es2015.js @@ -519,11 +519,11 @@ var fakeWindow = { }, }; -var $document = (typeof document !== undefined) +var $document = (typeof document !== 'undefined') ? document : fakeDocument; -var $window = (typeof window !== undefined) +var $window = (typeof window !== 'undefined') ? window : fakeWindow; diff --git a/dist/vue-authenticate.js b/dist/vue-authenticate.js index 938de4d..b72a370 100644 --- a/dist/vue-authenticate.js +++ b/dist/vue-authenticate.js @@ -525,11 +525,11 @@ var fakeWindow = { }, }; -var $document = (typeof document !== undefined) +var $document = (typeof document !== 'undefined') ? document : fakeDocument; -var $window = (typeof window !== undefined) +var $window = (typeof window !== 'undefined') ? window : fakeWindow; diff --git a/dist/vue-authenticate.min.js b/dist/vue-authenticate.min.js index 92ecb96..3c48248 100644 --- a/dist/vue-authenticate.min.js +++ b/dist/vue-authenticate.min.js @@ -4,4 +4,4 @@ * Released under the MIT License. */ -!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.VueAuthenticate=e()}(this,function(){"use strict";function t(t){return t.replace(/([\:\-\_]+(.))/g,function(t,e,o,r){return r?o.toUpperCase():o})}function e(t){return void 0===t}function o(t){return null!==t&&"object"==typeof t}function r(t){return"string"==typeof t}function n(t){return"function"==typeof t}function i(t,e){return null==t||null==e?t:(Object.keys(e).forEach(function(o){"[object Object]"==Object.prototype.toString.call(e[o])?"[object Object]"!=Object.prototype.toString.call(t[o])?t[o]=e[o]:t[o]=i(t[o],e[o]):t[o]=e[o]}),t)}function a(t,e){if(/^(?:[a-z]+:)?\/\//i.test(e))return e;var o=[t,e].join("/");return function(t){return t.replace(/[\/]+/g,"/").replace(/\/\?/g,"?").replace(/\/\#/g,"#").replace(/\:\//g,"://")}(o)}function s(t){var e="https:"===t.protocol;return t.protocol+"//"+t.hostname+":"+(t.port||(e?"443":"80"))+(/^\//.test(t.pathname)?t.pathname:"/"+t.pathname)}function u(t){var e,o,r={};return(t||"").split("&").forEach(function(t){t&&(o=t.split("="),e=decodeURIComponent(o[0]),r[e]=!o[1]||decodeURIComponent(o[1]))}),r}function p(t){var e;if("undefined"!=typeof module&&module.exports)try{e=require("buffer").Buffer}catch(t){}var o=String.fromCharCode,r=new RegExp(["[À-ß][€-¿]","[à-ï][€-¿]{2}","[ð-÷][€-¿]{3}"].join("|"),"g"),n=function(t){switch(t.length){case 4:var e=(7&t.charCodeAt(0))<<18|(63&t.charCodeAt(1))<<12|(63&t.charCodeAt(2))<<6|63&t.charCodeAt(3),r=e-65536;return o(55296+(r>>>10))+o(56320+(1023&r));case 3:return o((15&t.charCodeAt(0))<<12|(63&t.charCodeAt(1))<<6|63&t.charCodeAt(2));default:return o((31&t.charCodeAt(0))<<6|63&t.charCodeAt(1))}},i=function(t){return t.replace(r,n)};return(e?function(t){return(t.constructor===e.constructor?t:new e(t,"base64")).toString()}:function(t){return i(atob(t))})(String(t).replace(/[-_]/g,function(t){return"-"===t?"+":"/"}).replace(/[^A-Za-z0-9\+\/]/g,""))}function c(t){if(void 0===t&&(t=""),0===t.length)return{};var e={},o=new RegExp("\\s*;\\s*");return t.split(o).forEach(function(t){var o=t.split("="),r=o[0],n=o[1],i=decodeURIComponent(r),a=decodeURIComponent(n);e[i]=a}),e}function h(t){var e=t.path,o=t.domain,r=t.expires,n=t.secure;return[void 0===e||null===e?"":";path="+e,void 0===o||null===o?"":";domain="+o,void 0===r||null===r?"":";expires="+r.toUTCString(),void 0===n||null===n||!1===n?"":";secure"].join("")}function l(t,e,o){return[encodeURIComponent(t),"=",encodeURIComponent(e),h(o)].join("")}function f(t,e){for(var r=void 0,n=t,i=e.split("."),a=0;a>>10))+o(56320+(1023&r));case 3:return o((15&t.charCodeAt(0))<<12|(63&t.charCodeAt(1))<<6|63&t.charCodeAt(2));default:return o((31&t.charCodeAt(0))<<6|63&t.charCodeAt(1))}},i=function(t){return t.replace(r,n)};return(e?function(t){return(t.constructor===e.constructor?t:new e(t,"base64")).toString()}:function(t){return i(atob(t))})(String(t).replace(/[-_]/g,function(t){return"-"===t?"+":"/"}).replace(/[^A-Za-z0-9\+\/]/g,""))}function c(t){if(void 0===t&&(t=""),0===t.length)return{};var e={},o=new RegExp("\\s*;\\s*");return t.split(o).forEach(function(t){var o=t.split("="),r=o[0],n=o[1],i=decodeURIComponent(r),a=decodeURIComponent(n);e[i]=a}),e}function h(t){var e=t.path,o=t.domain,r=t.expires,n=t.secure;return[void 0===e||null===e?"":";path="+e,void 0===o||null===o?"":";domain="+o,void 0===r||null===r?"":";expires="+r.toUTCString(),void 0===n||null===n||!1===n?"":";secure"].join("")}function l(t,e,o){return[encodeURIComponent(t),"=",encodeURIComponent(e),h(o)].join("")}function f(t,e){for(var r=void 0,n=t,i=e.split("."),a=0;a