From e80643b1a819f799d57d4c10dcb585160d3eb3f3 Mon Sep 17 00:00:00 2001
From: pimlie <pimlie@hotmail.com>
Date: Tue, 23 Apr 2019 09:30:29 +0200
Subject: [PATCH] fix: move addNavGuards check to mounted hook

The addNavGuards check adds the navigation guards when an afterNavigation callback is defined but refreshOnceOnNavigation was not set. As the afterNavigation callback is defined in metaInfo which can be dependent on user data we need to wait until all components are fully mounted before checking if a afterNavigation callback was defined

Fixes: #348
---
 src/shared/mixin.js          | 18 +++++++-----------
 test/unit/components.test.js |  8 ++++++--
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/shared/mixin.js b/src/shared/mixin.js
index 732234ec..ef384e27 100644
--- a/src/shared/mixin.js
+++ b/src/shared/mixin.js
@@ -76,8 +76,14 @@ export default function createMixin(Vue, options) {
               if (!this.$root._vueMeta.initialized) {
                 // refresh meta in nextTick so all child components have loaded
                 this.$nextTick(function () {
-                  this.$root.$meta().refresh()
+                  const { metaInfo } = this.$root.$meta().refresh()
                   this.$root._vueMeta.initialized = true
+
+                  // add the navigation guards if they havent been added yet
+                  // they are needed for the afterNavigation callback
+                  if (!options.refreshOnceOnNavigation && metaInfo.afterNavigation) {
+                    addNavGuards(this)
+                  }
                 })
               }
             })
@@ -91,16 +97,6 @@ export default function createMixin(Vue, options) {
 
         // do not trigger refresh on the server side
         if (!this.$isServer) {
-          // add the navigation guards if they havent been added yet
-          // if metaInfo is defined as a function, this does call the computed fn redundantly
-          // but as Vue internally caches the results of computed props it shouldnt hurt performance
-          if (!options.refreshOnceOnNavigation && (
-            (this.$options[options.keyName] && this.$options[options.keyName].afterNavigation) ||
-            (this.$options.computed && this.$options.computed.$metaInfo && (this.$options.computed.$metaInfo() || {}).afterNavigation)
-          )) {
-            addNavGuards(this)
-          }
-
           // no need to add this hooks on server side
           updateOnLifecycleHook.forEach((lifecycleHook) => {
             ensuredPush(this.$options, lifecycleHook, () => triggerUpdate(this, lifecycleHook))
diff --git a/test/unit/components.test.js b/test/unit/components.test.js
index f909afed..0ead61b3 100644
--- a/test/unit/components.test.js
+++ b/test/unit/components.test.js
@@ -128,7 +128,7 @@ describe('client', () => {
     expect(context._uid).toBe(wrapper.vm._uid)
   })
 
-  test('afterNavigation function is called with refreshOnce: true', () => {
+  test('afterNavigation function is called with refreshOnce: true', async () => {
     const Vue = loadVueMetaPlugin(false, { refreshOnceOnNavigation: true })
     const afterNavigation = jest.fn()
     const component = Vue.component('nav-component', {
@@ -151,6 +151,8 @@ describe('client', () => {
       }
     })
 
+    await vmTick(wrapper.vm)
+
     expect(guards.before).toBeDefined()
     expect(guards.after).toBeDefined()
 
@@ -161,7 +163,7 @@ describe('client', () => {
     expect(afterNavigation).toHaveBeenCalled()
   })
 
-  test('afterNavigation function is called with refreshOnce: false', () => {
+  test('afterNavigation function is called with refreshOnce: false', async () => {
     const Vue = loadVueMetaPlugin(false, { refreshOnceOnNavigation: false })
     const afterNavigation = jest.fn()
     const component = Vue.component('nav-component', {
@@ -184,6 +186,8 @@ describe('client', () => {
       }
     })
 
+    await vmTick(wrapper.vm)
+
     expect(guards.before).toBeDefined()
     expect(guards.after).toBeDefined()