V
@matzeso I came to this topc with the exact problem and my “solution” looked like yours, so I think it’s relevant here. I’ve now a solution which is somewhat a workaround but still playing by the rules. I use route meta fields in routes.js and markup any route that should have my auth guard with requiredAuth meta field.
const routes = [
{
path: '/home',
component: () => import('layouts/BaseLayout.vue'),
children: [
{ path: '',
name: 'pagename',
meta: { requireAuth: true },
component: () => import('pages/HomePageName.vue') }
]
}
]
In router/index.js I then I pass store as an argument in the export default function and implement a beforeEach that checks the meta field. So the guard that require access to the store and a getter, is moved into a beforeEach function. It’s not strictly the same but good enough for me.
export default function ({ store }) {
const Router = new VueRouter({
...
})
Router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requireAuth)) {
if (store.getters['auth/isSignedIn']) {
next()
} else {
next({ name: 'account-signin', query: { next: to.fullPath } })
}
} else {
next()
}
})
return Router
}
So a little mix of previous replies by @metalsadman and others, with other parts of vue-router made it work for me.
