route /login managed through vue router

public/site/controllers/site.php

@@ -1,9 +1,6 @@
 <?php
 
 return function ($page, $kirby, $site) {
-  if (!$kirby->user() && $page->uri() != 'login') {
-    go('/login');
-  } else {
   $data = $page->toArray();
   $data['template'] = (string) $page->template();
   $data['newInspirations'] = (bool) page('inspirations')->children()->findBy('new', 'true');
@@ -27,5 +24,4 @@ return function ($page, $kirby, $site) {
     'genericData' => $data,
     'userData' => $userData ?? null
   ];
-  }
 };

public/site/templates/projects.json.php

@@ -1,7 +1,15 @@
 <?php
 
+if (!$kirby->user()) {
+  return json_encode([
+    'page' => $genericData,
+    'user' => []
+  ]);
+}
+
 function getProjectData($project)
 {  
+
     $data = [
     'title'                  => $project->title()->value(),
     'url'                    => $project->url(),

src/router/router.js

@@ -1,9 +1,9 @@
-import { createWebHistory, createRouter } from "vue-router";
+import { createWebHistory, createRouter } from 'vue-router';
-import routes from "./routes";
+import routes from './routes';
-import { useApiStore } from "../stores/api";
+import { useApiStore } from '../stores/api';
-import { usePageStore } from "../stores/page";
+import { usePageStore } from '../stores/page';
-import { useUserStore } from "../stores/user";
+import { useUserStore } from '../stores/user';
-import { getActivePinia } from "pinia";
+import { getActivePinia } from 'pinia';
 
 const router = createRouter({
   history: createWebHistory(),
@@ -12,10 +12,14 @@ const router = createRouter({
 
 router.beforeEach(async (to, from, next) => {
   const pinia = getActivePinia();
-  const api = useApiStore(pinia);
   const pageStore = usePageStore(pinia);
   const userStore = useUserStore(pinia);
 
+  if (to.path === '/login') next();
+
+  if (!userStore.user) next('/login');
+
+  const api = useApiStore(pinia);
   try {
     const res = await api.fetchData(to.path);
 

src/router/routes.js

@@ -13,6 +13,7 @@ const routes = [
     component: Home,
   },
   {
+    name: 'Login',
     path: '/login',
     component: Login,
   },