104 lines
2.9 KiB
TypeScript
104 lines
2.9 KiB
TypeScript
import { useAuthStore } from '@/stores/auth';
|
|
import { router } from '@inertiajs/vue3';
|
|
import { computed, onMounted, ref } from 'vue';
|
|
|
|
/**
|
|
* Composable to protect pages that require authentication
|
|
* Usage: Call this in the setup of any component that requires auth
|
|
*
|
|
* Example:
|
|
* ```vue
|
|
* <script setup lang="ts">
|
|
* import { useAuthGuard } from '@/composables/useAuthGuard';
|
|
*
|
|
* const { isChecking } = useAuthGuard();
|
|
* </script>
|
|
* ```
|
|
*
|
|
* Note: With the global middleware setup in app.ts, this composable is optional.
|
|
* The global middleware will handle redirects automatically.
|
|
* Use this composable if you need to show loading states or access auth data.
|
|
*/
|
|
export function useAuthGuard(redirectTo: string = '/login') {
|
|
const authStore = useAuthStore();
|
|
const isChecking = ref(true);
|
|
|
|
onMounted(async () => {
|
|
const isAuthenticated = await authStore.checkAuth();
|
|
isChecking.value = false;
|
|
|
|
if (!isAuthenticated) {
|
|
router.get(redirectTo, {}, { replace: true });
|
|
}
|
|
});
|
|
|
|
return {
|
|
isAuthenticated: computed(() => authStore.isAuthenticated),
|
|
user: computed(() => authStore.currentUser),
|
|
loading: computed(() => authStore.loading),
|
|
isChecking,
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Composable to protect pages that should only be accessible to guests
|
|
* (e.g., login, register pages)
|
|
*
|
|
* Example:
|
|
* ```vue
|
|
* <script setup lang="ts">
|
|
* import { useGuestGuard } from '@/composables/useAuthGuard';
|
|
*
|
|
* const { isChecking } = useGuestGuard();
|
|
* </script>
|
|
* ```
|
|
*
|
|
* Note: With the global middleware setup in app.ts, this composable is optional.
|
|
* The global middleware will handle redirects automatically.
|
|
* Use this composable if you need to show loading states.
|
|
*/
|
|
export function useGuestGuard(redirectTo: string = '/dashboard') {
|
|
const authStore = useAuthStore();
|
|
const isChecking = ref(true);
|
|
|
|
onMounted(async () => {
|
|
const isAuthenticated = await authStore.checkAuth();
|
|
isChecking.value = false;
|
|
|
|
if (isAuthenticated) {
|
|
router.get(redirectTo, {}, { replace: true });
|
|
}
|
|
});
|
|
|
|
return {
|
|
isAuthenticated: computed(() => authStore.isAuthenticated),
|
|
isChecking,
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Simple composable to access auth state without guards
|
|
*
|
|
* Example:
|
|
* ```vue
|
|
* <script setup lang="ts">
|
|
* import { useAuth } from '@/composables/useAuthGuard';
|
|
*
|
|
* const { user, isAuthenticated, logout } = useAuth();
|
|
* </script>
|
|
* ```
|
|
*/
|
|
export function useAuth() {
|
|
const authStore = useAuthStore();
|
|
|
|
return {
|
|
user: computed(() => authStore.currentUser),
|
|
isAuthenticated: computed(() => authStore.isAuthenticated),
|
|
loading: computed(() => authStore.loading),
|
|
error: computed(() => authStore.error),
|
|
login: authStore.login,
|
|
logout: authStore.logout,
|
|
checkAuth: authStore.checkAuth,
|
|
};
|
|
}
|