// auth.js — a tiny shared auth state module
import { ref } from 'vue';

export const isLoggedIn = ref(false);


// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Dashboard from '../views/Dashboard.vue';
import Login from '../views/Login.vue';
import { isLoggedIn } from '../auth';

const routes = [
  { path: '/dashboard', component: Dashboard },
  { path: '/login', component: Login },
];

export const router = createRouter({ history: createWebHistory(), routes });

// Global navigation guard
router.beforeEach((to, from) => {
  if (to.path === '/dashboard' && !isLoggedIn.value) {
    return '/login'; // redirect
  }
  // returning nothing (undefined) allows the navigation
});


<!-- src/views/Login.vue — toggles auth to test both outcomes -->
<script setup>
import { RouterLink } from 'vue-router';
import { isLoggedIn } from '../auth';
</script>

<template>
  <p>Logged in: {{ isLoggedIn }}</p>
  <button @click="isLoggedIn = !isLoggedIn">Toggle login state</button>
  <RouterLink to="/dashboard">Try the dashboard</RouterLink>
</template>

<!--
  Notes:
  - beforeEach runs before every navigation. For /dashboard it checks
    isLoggedIn: returning '/login' redirects, returning nothing allows.
  - With isLoggedIn false, clicking "Try the dashboard" bounces to
    /login; after toggling it true, the same link reaches the
    dashboard — demonstrating both guard outcomes.
  - This is Vue's equivalent of Angular's canActivate guard.
-->