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:
parent
412849b312
commit
734122ad27
4 changed files with 56 additions and 31 deletions
|
|
@ -1,5 +1,6 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed } from 'vue'
|
import { computed } from 'vue'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
import { Button } from '@/components/ui/button'
|
import { Button } from '@/components/ui/button'
|
||||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||||
import { Badge } from '@/components/ui/badge'
|
import { Badge } from '@/components/ui/badge'
|
||||||
|
|
@ -7,15 +8,13 @@ import { User, LogOut, Settings } from 'lucide-vue-next'
|
||||||
import { auth } from '@/composables/useAuth'
|
import { auth } from '@/composables/useAuth'
|
||||||
import { toast } from 'vue-sonner'
|
import { toast } from 'vue-sonner'
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
const userDisplay = computed(() => auth.userDisplay.value)
|
const userDisplay = computed(() => auth.userDisplay.value)
|
||||||
|
|
||||||
async function handleLogout() {
|
function handleLogout() {
|
||||||
try {
|
auth.logout()
|
||||||
await auth.logout()
|
toast.success('Logged out successfully')
|
||||||
toast.success('Logged out successfully')
|
router.push('/login')
|
||||||
} catch (error) {
|
|
||||||
toast.error('Failed to logout')
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, computed } from 'vue'
|
import { ref, computed } from 'vue'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
import { useI18n } from 'vue-i18n'
|
import { useI18n } from 'vue-i18n'
|
||||||
import { useTheme } from '@/components/theme-provider'
|
import { useTheme } from '@/components/theme-provider'
|
||||||
import { Button } from '@/components/ui/button'
|
import { Button } from '@/components/ui/button'
|
||||||
|
|
@ -15,6 +16,7 @@ interface NavigationItem {
|
||||||
href: string
|
href: string
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
const { theme, setTheme } = useTheme()
|
const { theme, setTheme } = useTheme()
|
||||||
const isOpen = ref(false)
|
const isOpen = ref(false)
|
||||||
|
|
@ -41,9 +43,10 @@ const openLoginDialog = () => {
|
||||||
|
|
||||||
const handleLogout = async () => {
|
const handleLogout = async () => {
|
||||||
try {
|
try {
|
||||||
await auth.logout()
|
auth.logout()
|
||||||
isOpen.value = false
|
isOpen.value = false
|
||||||
// The redirect is now handled in the auth.logout() function
|
// Redirect to login page
|
||||||
|
router.push('/login')
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Logout failed:', error)
|
console.error('Logout failed:', error)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
import { ref, computed } from 'vue'
|
import { ref, computed } from 'vue'
|
||||||
import { useRouter } from 'vue-router'
|
|
||||||
import { lnbitsAPI, type User, type LoginCredentials, type RegisterData } from '@/lib/api/lnbits'
|
import { lnbitsAPI, type User, type LoginCredentials, type RegisterData } from '@/lib/api/lnbits'
|
||||||
|
|
||||||
const currentUser = ref<User | null>(null)
|
const currentUser = ref<User | null>(null)
|
||||||
|
|
@ -7,7 +6,6 @@ const isLoading = ref(false)
|
||||||
const error = ref<string | null>(null)
|
const error = ref<string | null>(null)
|
||||||
|
|
||||||
export function useAuth() {
|
export function useAuth() {
|
||||||
const router = useRouter()
|
|
||||||
const isAuthenticated = computed(() => !!currentUser.value)
|
const isAuthenticated = computed(() => !!currentUser.value)
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -77,16 +75,10 @@ export function useAuth() {
|
||||||
* Logout and clear user data
|
* Logout and clear user data
|
||||||
*/
|
*/
|
||||||
async function logout(): Promise<void> {
|
async function logout(): Promise<void> {
|
||||||
try {
|
// Clear local state
|
||||||
await lnbitsAPI.logout()
|
lnbitsAPI.logout()
|
||||||
} catch (err) {
|
currentUser.value = null
|
||||||
console.error('Logout error:', err)
|
error.value = null
|
||||||
} finally {
|
|
||||||
currentUser.value = null
|
|
||||||
error.value = null
|
|
||||||
// Redirect to login page after logout
|
|
||||||
router.push('/login')
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
||||||
|
|
@ -50,14 +50,50 @@ class LnbitsAPI {
|
||||||
(headers as Record<string, string>)['Authorization'] = `Bearer ${this.accessToken}`
|
(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, {
|
const response = await fetch(url, {
|
||||||
...options,
|
...options,
|
||||||
headers,
|
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) {
|
if (!response.ok) {
|
||||||
const errorData = await response.json().catch(() => ({}))
|
let errorMessage = `HTTP ${response.status}: ${response.statusText}`
|
||||||
throw new Error(errorData.detail || `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()
|
return response.json()
|
||||||
|
|
@ -88,14 +124,9 @@ class LnbitsAPI {
|
||||||
}
|
}
|
||||||
|
|
||||||
async logout(): Promise<void> {
|
async logout(): Promise<void> {
|
||||||
try {
|
// Just clear local state - no API call needed for logout
|
||||||
await this.request('/auth/logout', {
|
this.accessToken = null
|
||||||
method: 'POST',
|
removeAuthToken()
|
||||||
})
|
|
||||||
} finally {
|
|
||||||
this.accessToken = null
|
|
||||||
removeAuthToken()
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async getCurrentUser(): Promise<User> {
|
async getCurrentUser(): Promise<User> {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue