Basic account and session system
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.
This commit is contained in:
parent
abdcc83eb9
commit
150cb82f5c
11 changed files with 276 additions and 4 deletions
33
pages/login.vue
Normal file
33
pages/login.vue
Normal file
|
@ -0,0 +1,33 @@
|
|||
<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>
|
Loading…
Add table
Add a link
Reference in a new issue