Handle session expiration correctly and fix icon CORS errors
- Detect CORS/redirect errors from Authentik and interpret them as "no session" instead of generic error - When session expires, Authentik returns 302 redirect to login which causes CORS error in fetch requests - Add /api/_nuxt_icon/ to public routes to prevent icon load failures after logout This fixes the issue where logout in Authentik showed "Error" instead of "Sin Sesión" when checking session status.
This commit is contained in:
@@ -24,7 +24,7 @@ services:
|
|||||||
- "traefik.http.services.${APP_NAME}.loadbalancer.server.port=3000"
|
- "traefik.http.services.${APP_NAME}.loadbalancer.server.port=3000"
|
||||||
|
|
||||||
# Router 1: Public PWA resources (no auth) - Higher priority
|
# Router 1: Public PWA resources (no auth) - Higher priority
|
||||||
- "traefik.http.routers.${APP_NAME}-public.rule=Host(`${APP_DOMAIN}`) && (PathPrefix(`/manifest.webmanifest`) || PathPrefix(`/sw.js`) || PathPrefix(`/workbox-`) || PathPrefix(`/icon-`) || PathPrefix(`/apple-touch-icon`) || PathPrefix(`/favicon.ico`) || PathPrefix(`/robots.txt`))"
|
- "traefik.http.routers.${APP_NAME}-public.rule=Host(`${APP_DOMAIN}`) && (PathPrefix(`/manifest.webmanifest`) || PathPrefix(`/sw.js`) || PathPrefix(`/workbox-`) || PathPrefix(`/icon-`) || PathPrefix(`/apple-touch-icon`) || PathPrefix(`/favicon.ico`) || PathPrefix(`/robots.txt`) || PathPrefix(`/api/_nuxt_icon/`))"
|
||||||
- "traefik.http.routers.${APP_NAME}-public.entrypoints=websecure"
|
- "traefik.http.routers.${APP_NAME}-public.entrypoints=websecure"
|
||||||
- "traefik.http.routers.${APP_NAME}-public.tls.certresolver=letsencrypt"
|
- "traefik.http.routers.${APP_NAME}-public.tls.certresolver=letsencrypt"
|
||||||
- "traefik.http.routers.${APP_NAME}-public.priority=100"
|
- "traefik.http.routers.${APP_NAME}-public.priority=100"
|
||||||
|
|||||||
@@ -86,7 +86,24 @@ export const useAuthentik = () => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
// Error al consultar
|
// Si el error es por redirect de Authentik (CORS/fetch error), significa que no hay sesión
|
||||||
|
// Authentik redirige a login cuando no hay sesión válida, causando error CORS en fetch
|
||||||
|
const errorMessage = error?.message || error?.toString() || ''
|
||||||
|
const isCorsOrRedirectError = errorMessage.includes('Failed to fetch') ||
|
||||||
|
errorMessage.includes('CORS') ||
|
||||||
|
error?.statusCode === 302
|
||||||
|
|
||||||
|
if (isCorsOrRedirectError) {
|
||||||
|
// Interpretar como sesión expirada/inválida
|
||||||
|
toast.add({
|
||||||
|
title: 'Sin Sesión',
|
||||||
|
description: 'No hay sesión activa en Authentik',
|
||||||
|
color: 'warning',
|
||||||
|
icon: 'i-heroicons-exclamation-triangle',
|
||||||
|
timeout: 5000
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
// Error real de red o servidor
|
||||||
toast.add({
|
toast.add({
|
||||||
title: 'Error',
|
title: 'Error',
|
||||||
description: 'No se pudo verificar el estado de la sesión',
|
description: 'No se pudo verificar el estado de la sesión',
|
||||||
@@ -94,6 +111,7 @@ export const useAuthentik = () => {
|
|||||||
icon: 'i-heroicons-x-circle',
|
icon: 'i-heroicons-x-circle',
|
||||||
timeout: 5000
|
timeout: 5000
|
||||||
})
|
})
|
||||||
|
}
|
||||||
console.error('Error checking session status:', error)
|
console.error('Error checking session status:', error)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user