refactor: Simplify logout process and enhance routing in authentication components

- Remove unnecessary async handling in logout functions across UserProfile.vue and Navbar.vue.
- Integrate `useRouter` for consistent redirection to the login page after logout.
- Update `logout` method in useAuth.ts to clear local state without an API call.
This commit is contained in:
padreug 2025-07-30 00:23:36 +02:00
parent 412849b312
commit 734122ad27
4 changed files with 56 additions and 31 deletions

View file

@ -1,5 +1,6 @@
<script setup lang="ts">
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
@ -7,15 +8,13 @@ import { User, LogOut, Settings } from 'lucide-vue-next'
import { auth } from '@/composables/useAuth'
import { toast } from 'vue-sonner'
const router = useRouter()
const userDisplay = computed(() => auth.userDisplay.value)
async function handleLogout() {
try {
await auth.logout()
function handleLogout() {
auth.logout()
toast.success('Logged out successfully')
} catch (error) {
toast.error('Failed to logout')
}
router.push('/login')
}
</script>

View file

@ -1,5 +1,6 @@
<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useTheme } from '@/components/theme-provider'
import { Button } from '@/components/ui/button'
@ -15,6 +16,7 @@ interface NavigationItem {
href: string
}
const router = useRouter()
const { t } = useI18n()
const { theme, setTheme } = useTheme()
const isOpen = ref(false)
@ -41,9 +43,10 @@ const openLoginDialog = () => {
const handleLogout = async () => {
try {
await auth.logout()
auth.logout()
isOpen.value = false
// The redirect is now handled in the auth.logout() function
// Redirect to login page
router.push('/login')
} catch (error) {
console.error('Logout failed:', error)
}

View file

@ -1,5 +1,4 @@
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { lnbitsAPI, type User, type LoginCredentials, type RegisterData } from '@/lib/api/lnbits'
const currentUser = ref<User | null>(null)
@ -7,7 +6,6 @@ const isLoading = ref(false)
const error = ref<string | null>(null)
export function useAuth() {
const router = useRouter()
const isAuthenticated = computed(() => !!currentUser.value)
/**
@ -77,16 +75,10 @@ export function useAuth() {
* Logout and clear user data
*/
async function logout(): Promise<void> {
try {
await lnbitsAPI.logout()
} catch (err) {
console.error('Logout error:', err)
} finally {
// Clear local state
lnbitsAPI.logout()
currentUser.value = null
error.value = null
// Redirect to login page after logout
router.push('/login')
}
}
/**

View file

@ -50,14 +50,50 @@ class LnbitsAPI {
(headers as Record<string, string>)['Authorization'] = `Bearer ${this.accessToken}`
}
// Debug logging
if (import.meta.env.VITE_LNBITS_DEBUG === 'true') {
console.log('LNBits API Request:', {
url,
method: options.method || 'GET',
headers: options.headers,
body: options.body
})
}
const response = await fetch(url, {
...options,
headers,
})
// Debug logging
if (import.meta.env.VITE_LNBITS_DEBUG === 'true') {
console.log('LNBits API Response:', {
status: response.status,
statusText: response.statusText,
url: response.url
})
}
if (!response.ok) {
const errorData = await response.json().catch(() => ({}))
throw new Error(errorData.detail || `HTTP ${response.status}: ${response.statusText}`)
let errorMessage = `HTTP ${response.status}: ${response.statusText}`
try {
const errorData = await response.json()
errorMessage = errorData.detail || errorData.message || errorMessage
} catch {
// If we can't parse JSON, use the default error message
}
// Debug logging for errors
if (import.meta.env.VITE_LNBITS_DEBUG === 'true') {
console.error('LNBits API Error:', {
status: response.status,
statusText: response.statusText,
url: response.url,
error: errorMessage
})
}
throw new Error(errorMessage)
}
return response.json()
@ -88,15 +124,10 @@ class LnbitsAPI {
}
async logout(): Promise<void> {
try {
await this.request('/auth/logout', {
method: 'POST',
})
} finally {
// Just clear local state - no API call needed for logout
this.accessToken = null
removeAuthToken()
}
}
async getCurrentUser(): Promise<User> {
return this.request<User>('/auth')