frontend: fix admin auth with redirects

Signed-off-by: Nicolas Froger <nicolas@kektus.xyz>

summer2024-frontend/src/router/index.js

@@ -5,6 +5,16 @@ import AdminView from '@/views/AdminView.vue'
 import LoginView from '@/views/LoginView.vue'
 import { useAuthStore } from '@/stores/auth.js'
 
+function authenticatedRoute(to) {
+  const authStore = useAuthStore()
+
+  if (!authStore.isAuth) {
+    return { name: 'admin_login', query: { redirect: to.fullPath } };
+  }
+
+  return true;
+}
+
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
@@ -21,24 +31,16 @@ const router = createRouter({
     {
       path: '/admin',
       name: 'admin',
-      component: AdminView
+      component: AdminView,
+      beforeEnter: [authenticatedRoute]
     },
     {
       path: '/admin/post/create',
       name: 'admin_create_post',
-      component: CreatePostView
+      component: CreatePostView,
+      beforeEnter: [authenticatedRoute]
     }
   ]
 })
-router.beforeEach(async (to, from) => {
-  const authStore = useAuthStore()
-
-  if (
-    !authStore.isAuth &&
-    to.name.startsWith('admin_') && to.name !== 'admin_login'
-  ) {
-    return { name: 'admin_login' }
-  }
-})
 
 export default router

summer2024-frontend/src/stores/auth.js

@@ -27,11 +27,16 @@ export const useAuthStore = defineStore("auth", () => {
     })
   }
 
+  function checkFromLocalStorage() {
     const storedToken = localStorage.getItem("kektus-summer-admin-token")
     if (storedToken) {
-    login(storedToken)
+      return login(storedToken)
+    }
+
+    return Promise.resolve();
   }
 
 
-  return { adminToken, login, isAuth, error }
+
+  return { adminToken, login, checkFromLocalStorage, isAuth, error }
 })

summer2024-frontend/src/views/LoginView.vue

@@ -6,13 +6,19 @@ import { z } from 'zod'
 import { useForm } from 'vee-validate'
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert/index.js'
 import { AlertCircle } from 'lucide-vue-next'
-import { ref } from 'vue'
+import { onMounted } from 'vue'
 import { FormControl, FormField, FormItem, FormLabel } from '@/components/ui/form/index.js'
 import { Input } from '@/components/ui/input/index.js'
 import { Button } from '@/components/ui/button/index.js'
 import router from '@/router/index.js'
+import { useRoute } from 'vue-router'
 
 const authStore = useAuthStore()
+const nextView = useRoute().query.redirect;
+
+onMounted(() => {
+  authStore.checkFromLocalStorage().then(onLogin);
+})
 
 const formSchema = toTypedSchema(z.object({
   token: z.string().min(1)
@@ -22,9 +28,20 @@ const form = useForm({
 })
 
 const onSubmit = form.handleSubmit((values) => {
-  authStore.login(values.token).then(_ => router.push({name: "admin"}))
+  authStore.login(values.token).then(onLogin)
 })
 
+function onLogin() {
+  if (!authStore.isAuth)
+    return;
+
+  if (nextView) {
+    router.push(nextView);
+  } else {
+    router.push({name: "admin"});
+  }
+}
+
 </script>
 
 <template>