d0whc3r / vue-auth-plugin

Vue auth plugin with typescript
https://vue-auth-plugin.netlify.app
MIT License
57 stars 13 forks source link

Multiple vue.js app instance support #142

Open Andrei-Pozolotin opened 5 years ago

Andrei-Pozolotin commented 5 years ago
  1. this approach: https://d0whc3r.github.io/vue-auth-plugin/installation.html#use-vue-router-and-vuex
    const store = new Vuex.Store({ ... });
    (Vue as any).store = store;
      if (!_this.Vue.store) {
526:        throw Error('[vue-auth-plugin] vuex is a required dependency if you want to use "vuex" as storage');
      }
vue-auth-plugin.umd.js:526 Uncaught Error: [vue-auth-plugin] vuex is a required dependency if you want to use "vuex" as storage
    at new StoreVuex (vue-auth-plugin.umd.js:526)
    at vue-auth-plugin.umd.js:650
    at Array.map (<anonymous>)
    at AuthStoreManager.setStores (vue-auth-plugin.umd.js:640)
    at new AuthStoreManager (vue-auth-plugin.umd.js:622)
    at new Auth (vue-auth-plugin.umd.js:1833)
    at Object.install (vue-auth-plugin.umd.js:1893)
    at Function.Vue.use (vue.js:5094)
    at vue-auth-plugin.umd.js:1910
    at vue-auth-plugin.umd.js:9
  1. prevents using multiple vue.js app instances: https://vuex.vuejs.org/guide/state.html when store is injected per-instance:
    const app = new Vue({
    el: '#app',
    // provide the store using the "store" option.
    // this will inject the store instance to all child components.
    store,
    components: { Counter },
    template: `
    <div class="app">
      <counter></counter>
    </div>
    `
    })
  2. instead, VueAuthPlugin should behave as store-attached plugin: https://vuex.vuejs.org/guide/plugins.html
    const store = new Vuex.Store({
    // ...
    plugins: [VueAuthPlugin] // can be class or instance
    })
d0whc3r commented 5 years ago

If you have a solution for this, could you make a pr?

Andrei-Pozolotin commented 5 years ago

a solution could be a change to a lazy-init pattern:

  Object.defineProperties(Vue.prototype, {
    $auth: {
      get: function get() {
        if (!this.__auth__) {
          if (this.$http) { /* use user-provided axios */ } else { /* use default http provider */ }
          if (this.$store) { /* use user-provided vuex */ } else { /* ... */ }
          if (this.$router) { /* use user-provided vue-router */ } else { /* ... */ }
          this.__auth__ = new VueAuthCore(this.$http, this.$store, this.$router, options);
        }
        return this.__auth__
      }
    }
  });