Protect root page in Vue SPA
🔍Authentication🏬Self-hosted❓Question✅Solved
Hello,
I'm trying to guard the root page. However, I keep getting the error below which make sense as I'm trying to access
My current structure
App.vue >
AppLayout (Renders different layouts based on page if protected or not)
I tried to look in documentation, use ChatGPT , search but no luck.
Any idea how to solve this?
I'm trying to guard the root page. However, I keep getting the error below which make sense as I'm trying to access
useAuthuseAuth inside createRouter({..}).beaforeEachcreateRouter({..}).beaforeEach. AuthProvider context is undefined, please verify you are calling useAuth() as child of a <AuthProvider> component.AuthProvider context is undefined, please verify you are calling useAuth() as child of a <AuthProvider> component.My current structure
App.vue >
<template>
<AppLayout />
</template><template>
<AppLayout />
</template>AppLayout (Renders different layouts based on page if protected or not)
<template>
<component :is="layout">
<RouterView />
</component>
</template><template>
<component :is="layout">
<RouterView />
</component>
</template>I tried to look in documentation, use ChatGPT , search but no luck.
Any idea how to solve this?
