@autenticar-me/vue 0.16.0 → 0.17.0

package/README.md

@@ -38,6 +38,100 @@ app.mount('#app')
 - **`useAuth()`** - Gerenciamento de autenticação
 - **`useTheme()`** - Controle de tema (light/dark)
 
+## Verificação Periódica de Autenticação
+
+O pacote inclui um sistema automático de verificação de autenticação que monitora o estado de login do usuário a cada 3 segundos. Se a sessão expirar ou o usuário for deslogado no servidor, o logout é executado automaticamente e um evento é emitido.
+
+### Como Funciona
+
+- Após o login, a verificação inicia automaticamente
+- A cada 3 segundos, faz uma requisição à rota de perfil do usuário
+- Se a requisição falhar (token inválido, sessão expirada, etc.):
+  - Executa logout automático
+  - Limpa os dados do usuário
+  - Remove tokens dos cookies
+  - Emite evento de logout
+
+### Capturando o Evento de Logout
+
+Use o método `onLogout()` do composable `useAtm()` para registrar callbacks que serão executados quando o logout ocorrer (manual ou automático):
+
+```vue
+<template>
+  <div>
+    <h1>Minha Aplicação</h1>
+    <UserProfile />
+  </div>
+</template>
+
+<script setup>
+import { onMounted, onUnmounted } from 'vue'
+import { useAtm } from '@autenticar-me/vue'
+import { useRouter } from 'vue-router'
+
+const { onLogout } = useAtm()
+const router = useRouter()
+
+onMounted(() => {
+  const unsubscribe = onLogout(() => {
+    console.log('Usuário foi deslogado')
+    router.push('/login')
+  })
+
+  onUnmounted(() => {
+    unsubscribe()
+  })
+})
+</script>
+```
+
+### Exemplo com Notificação ao Usuário
+
+```vue
+<script setup>
+import { onMounted, onUnmounted } from 'vue'
+import { useAtm } from '@autenticar-me/vue'
+import { useRouter } from 'vue-router'
+
+const { onLogout } = useAtm()
+const router = useRouter()
+
+onMounted(() => {
+  const unsubscribe = onLogout(() => {
+    alert('Sua sessão expirou. Por favor, faça login novamente.')
+    router.push('/login')
+  })
+
+  onUnmounted(() => {
+    unsubscribe()
+  })
+})
+</script>
+```
+
+### Controle Manual do Polling
+
+Caso precise controlar manualmente quando o polling inicia ou para:
+
+```vue
+<script setup>
+import { onMounted, onUnmounted } from 'vue'
+import { useAuth } from '@autenticar-me/vue'
+
+const { startAuthPolling, stopAuthPolling } = useAuth()
+
+onMounted(() => {
+  startAuthPolling()
+})
+
+onUnmounted(() => {
+  stopAuthPolling()
+})
+</script>
+```
+
+**Nota:** Na maioria dos casos, não é necessário controlar manualmente o polling, pois ele inicia automaticamente após o login e para automaticamente no logout.
+
 ## Componentes
 
 ### Formulários de Autenticação

package/dist/index.cjs

@@ -71,7 +71,10 @@ const startAuthPolling = (client, user, emitLogout) => {
     return;
   }
   authPollingInterval = window.setInterval(async () => {
-    if (user.value === null || user.value === void 0) {
+    const hasToken = document.cookie.includes("atm_access_token") || document.cookie.includes("atm_refresh_token");
+    if (!hasToken || user.value === null || user.value === void 0) {
+      stopAuthPolling();
+      emitLogout();
       return;
     }
     try {