Router beforeEach guard executed before state loaded in Vue created() : <p>If I navigate <em>directly</em> to an admin guarded route, <code>http://127.0.0.1:8000/dashboard/</code>, the navigation is always rejected because the state hasn't yet loaded at the time the router guard is checked.</p>

<p><code>beforeEach</code> is being executed before Vue <code>created</code> and thus the currently logged in user isn't recognized.</p>

<p>How do I get around this chicken and egg issue?</p>

<p><em>files below truncated for relevancy</em></p>

<h2>main.js</h2>

<pre><code>router.beforeEach((to, from, next) =&gt; {
    //
    // This is executed before the Vue created() method, and thus store getter always fails initially for admin guarded routes
    //

    // The following getter checks if the state's current role is allowed
    const allowed = store.getters[`acl/${to.meta.guard}`]

    if (!allowed) {
        return next(to.meta.fail)
    }

    next()
})

const app = new Vue({
    router,
    store,

    el: "#app",

    created() {
        // state loaded from localStorage if available
        this.$store.dispatch("auth/load")
    },

    render: h =&gt; h(App)
})
</code></pre>

<h2>router.js</h2>

<pre><code>export default new VueRouter({
    mode: 'history',

    routes: [
        {
            path: '/',
            name: 'home',
            component: () =&gt; import('../components/Home.vue'),
            meta: {
                guard: "isAny",
            },
        },

        {
            path: '/dashboard/',
            name: 'dashboard',
            component: () =&gt; import('../components/Dashboard.vue'),
            meta: {
                guard: "isAdmin",
            },
        },
    ],
})
</code></pre>
