Hornwitser
150cb82f5c
Provide a basic account system with login and server side session store identified by a cookie. Upon successful login a signed session cookie is set by the server with the session stored on the server identifying which account it is logged in as. The client uses a shared useFetch on the session endpoint to identify if it's logged in and which account it is logged in as, and refreshes this when loggin in or out.
33 lines
832 B
Vue
33 lines
832 B
Vue
<template>
|
|
<main>
|
|
<h1>Log In</h1>
|
|
<form @submit.prevent="logIn">
|
|
<input v-model="name" type="text" placeholder="Name" required>
|
|
<button type="submit">Log In</button>
|
|
</form>
|
|
<pre><code>{{ result }}</code></pre>
|
|
<pre><code>Session: {{ session }}</code></pre>
|
|
</main>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
const { data: session, refresh: sessionRefresh } = useAccountSession();
|
|
|
|
const name = ref("");
|
|
const result = ref("")
|
|
async function logIn() {
|
|
try {
|
|
const res = await $fetch.raw("/api/auth/login", {
|
|
method: "POST",
|
|
body: { name: name.value },
|
|
});
|
|
result.value = `Server replied: ${res.status} ${res.statusText}`;
|
|
await sessionRefresh();
|
|
|
|
} catch (err: any) {
|
|
console.log(err);
|
|
console.log(err.data);
|
|
result.value = `Server replied: ${err.statusCode} ${err.statusMessage}`;
|
|
}
|
|
}
|
|
</script>
|