An error occurred while loading the file. Please try again.
-
Mandic authoredfe5ca278
import { defineStore } from 'pinia'
import { type Router } from 'vue-router'
interface AuthState {
user: User | null
isAuthenticated: boolean
}
interface User {
id: number
email: string
[key: string]: any // Add more fields as needed
}
export const useAuthStore = defineStore('auth', {
state: (): AuthState => {
const storedState = localStorage.getItem('authState')
return storedState
? JSON.parse(storedState)
: {
user: null,
isAuthenticated: false,
}
},
actions: {
async setCsrfToken(): Promise<void> {
await fetch('http://localhost:8000/api/set-csrf-token', {
method: 'GET',
credentials: 'include',
})
},
async login(email: string, password: string, router: Router | null = null): Promise<void> {
const response = await fetch('http://localhost:8000/api/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': getCSRFToken(),
},
body: JSON.stringify({
email,
password,
}),
credentials: 'include',
})
const data = await response.json()
if (data.success) {
this.isAuthenticated = true
this.saveState()
if (router) {
await router.push({
name: 'home',
})
}
} else {
this.user = null
this.isAuthenticated = false
this.saveState()
}
},
async logout(router: Router | null = null): Promise<void> {
try {
const response = await fetch('http://localhost:8000/api/logout', {
method: 'POST',
headers: {
'X-CSRFToken': getCSRFToken(),
},
credentials: 'include',
})
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
if (response.ok) {
this.user = null
this.isAuthenticated = false
this.saveState()
if (router) {
await router.push({
name: 'login',
})
}
}
} catch (error) {
console.error('Logout failed', error)
throw error
}
},
async fetchUser(): Promise<void> {
try {
const response = await fetch('http://localhost:8000/api/user', {
credentials: 'include',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': getCSRFToken(),
},
})
if (response.ok) {
const data: User = await response.json()
this.user = data
this.isAuthenticated = true
} else {
this.user = null
this.isAuthenticated = false
}
} catch (error) {
console.error('Failed to fetch user', error)
this.user = null
this.isAuthenticated = false
}
this.saveState()
},
saveState(): void {
/*
We save state to local storage to keep the
state when the user reloads the page.
This is a simple way to persist state. For a more robust solution,
use pinia-persistent-state.
*/
localStorage.setItem(
'authState',
JSON.stringify({
user: this.user,
isAuthenticated: this.isAuthenticated,
}),
)
},
},
})
export function getCSRFToken(): string {
/*
We get the CSRF token from the cookie to include in our requests.
This is necessary for CSRF protection in Django.
*/
const name = 'csrftoken'
let cookieValue: string | null = null
if (document.cookie && document.cookie !== '') {
const cookies = document.cookie.split(';')
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim()
if (cookie.substring(0, name.length + 1) === name + '=') {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1))
break
}
}
}
if (cookieValue === null) {
throw new Error('Missing CSRF cookie.')
}
return cookieValue
}