feat: add auth protection to routes using meta fields

src/pages/comprar.vue

@@ -3,5 +3,9 @@
 </template>
 
 <script setup>
-//
+definePage({
+  meta: {
+    requiresAuth: true
+  }
+})
 </script>

src/pages/summary_purchase.vue

@@ -3,5 +3,9 @@
 </template>
 
 <script setup>
-  //
+definePage({
+  meta: {
+    requiresAuth: true
+  }
+})
 </script>

src/router/index.js

@@ -15,6 +15,17 @@ const router = createRouter({
   routes: setupLayouts(routes),
 })
 
+router.beforeEach((to, from, next) => {
+  const isAuthenticated = !!localStorage.getItem('access_token')
+  const requiresAuth = to.meta.requiresAuth === true
+
+  if (requiresAuth && !isAuthenticated) {
+    next({ path: '/autenticarse', replace: true })
+  } else {
+    next()
+  }
+})
+
 // Workaround for https://github.com/vitejs/vite/issues/11804
 router.onError((err, to) => {
   if (err?.message?.includes?.('Failed to fetch dynamically imported module')) {

vite.config.mjs

@@ -39,6 +39,9 @@ export default defineConfig({
       imports: [
         'vue',
         'vue-router',
+        {
+          'unplugin-vue-router': ['definePage'],
+        },
       ],
       eslintrc: {
         enabled: true,