Infinite update loop

[v1996-96]

I'm using vue-kindergarten to manage user permissions in page components, local components and as a route guard. So when I try to login with first account, navigate between few pages, logout and then login with second account with other permissions, vuejs stucks with an error: "You may have an infinite update loop in a component render function.". That error arises in computed property, generated by plugin.

I am not able to show code, but I can say that I did everything according to tutorial.

The error can be possibly located in decorateComponents.js. Each call of sandboxGetter function creates new sandbox. So when new computed properties are setting up, each of them points to the new instance of the sandbox. This could be a source of the problem, but I am not sure about that.

I have changed decorateComponents.js code and it worked for me (sandboxGetter function is called only once).

      const sandboxGetter = () => createSandbox(sandboxChild(), {
        governess,
        perimeters
      });

      const sandbox = sandboxGetter();

      options.computed = options.computed || {};
      options.methods = options.methods || {};

      options.computed.$sandbox = () => sandbox;

      // Add helper methods from sandbox
      (useSandboxMethods || []).forEach((methodName) => {
        const $methodName = `$${methodName}`;
        const sandboxMethod = sandbox[methodName];
        options.computed[$methodName] = typeof sandboxMethod === 'function' ?
          () => sandboxMethod.bind(sandbox) : () => sandboxMethod;
      });

      // Add purpose
      if (exposePurpose) {
        sandbox.getPerimeters().forEach((perimeter) => {
          const purpose = perimeter.getPurpose();
          options.computed[`$${purpose}`] = () => sandbox[purpose];
        });
      }

[v1996-96]

Here is my pull request: https://github.com/JiriChara/vue-kindergarten/pull/32

[JiriChara]

Hi @v1996-96,

thank you very much for the PR, but unfortunately the E2E are failing. I was using getter there, because Vue.js was not triggering the updates when user logged-in/logged-out.

Do you think you can create an example so I can reproduce that bug? I will probably have no time during x-mas, but I will try to find a better/simpler way to decorate the components with sandbox.

Thanks!

[BboyKeen]

Hi @JiriChara We use Nuxt.js 2 with Vue 2.5.17 and Vuex 3.0.1 We faced a similar issue in our application and had to take a more restrictive path to avoid this kind of issue, i.e :

• Having only one perimeter with all rules inside
• Stop relying on injected perimeters in template like v-if=$user.isAllowed('xxxx') and use component methods like the following instead

methods : {
   hasAuthorization(xxxx) {
        return UserPerimeter.isAllowed('xxxx')
   }
}

Obviously, by doing so we completely lose the interest of using vue-kindergarten :/

Here is our child also (maybe we do something really bad in it...)

export default ( store ) => {
  if ( store ) {
    return {
      user: store.state.user,
      program: store.state.program,
      organization: store.state.organization,
      report: store.state.report,
      store: store
    }
  } else {
    return store
  }
}

Would you have time to work on it if I can provide you with an example to reproduce ? Thanks for your work :)