An error occurred while loading the file. Please try again.
-
Patrick Ade authored
Implement authentication store using Pinia; create auth store with login, logout, and user fetching functionalities. Update main entry point to reflect new store structure; change import path for auth store. Add TypeScript support for Vue components; create shims-vue.d.ts for .vue file declarations. Create Login and Register views with authentication logic; implement user login and registration forms with error handling. Refactor HomeView to utilize authentication store; display user information and logout functionality based on authentication state.
e6e9197f
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
}