Route guard

[ghost]

Any way to put a route guard ?
Old questions of the discussion doesn't answered:(

[NamesMT]

After taking a peek at vite-plugin-pages, I think we could use custom metadata and extendRoute to implement guards.

Edit:
Actually, extendRoute is not even needed, you could use the custom metadata along with a beforeEach that handles everything.
It is, however, needed if you want to add per-route guards (beforeEnter).

[MarcoSantana]

Please can you post an example?
Thanks!!!

[mergeMarc]

Here is a quick example i created. Please note that i'm new to Vue so there is probably better/securer ways to check and store if the user is authenticated. In my example i used a Pina store to save authentication information (useAuthStore).

I created file src/modules/guard.ts:

import { type UserModule } from '~/types'

export const install: UserModule = ({ isClient, router }) => {
    router.beforeEach((to, from) => {
        const auth = useAuthStore()
        //             Page requires login     Prevent redirect loops       User authentication check
        if(isClient && to.meta.requiresAuth && to.path !== '/app/login'  && !auth.isAuthenticated()) {
            console.log('Authentication required for page \'' + to.name?.toString() + '\'! Redirecting to login.')
            // Redirect user to login page
            return { path: '/app/login' }
        }
    })
}

In the pages (under src/pages) that require the user to be logged in, i added the meta tag 'requiresAuth: true' to the route block.
Here is an example of my file src/pages/app/index.vue:

<script setup>
</script>

<template>
    [App - Home]
</template>

<route lang="yaml">
meta:
  layout: home
  requiresAuth: true
</route>