Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-11 08:33:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

improved login process to use fetch() without full page reload and comments

Browse Source
This commit is contained in:
David Nahodyl 2024-06-05 14:27:13 -04:00
parent fb2c03a0b9
commit cc354886f2
No known key found for this signature in database
1 changed files with 46 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
docs/2.guide/4.recipes/4.sessions-and-authentication.md
View File

@ -49,16 +49,27 @@ Create a new page in your Nuxt app for user registration. This page should have
error.value = null; error.value = null;
// perform the login // perform the login
await $fetch("/api/register", { try {
method: "POST", await $fetch("/api/register", {
body: form.value, method: "POST",
onResponseError: () => { body: form.value,
error.value = "Error Registering User"; });
}, } catch (e) {
}); // if there's an error, set the error message and return early
error.value = "Error Registering User";
return;
}
// refresh the session status now that the user is logged in
const { fetch } = useUserSession();
await fetch();
// you may want to use something like Pinia to manage global state of the logged-in user
// update Pinia state here...
// we're not using Nuxt Router here so that we can easily trigger a whole page load and get everything refreshed now that the user is logged in // take the user to the auth-only users index page now that they're logged in
window.location.href = "/login"; await navigateTo("/users");
// Alternative - Don't use Nuxt Router here so that we can easily trigger a whole page load and get the whole UI refreshed now that the user is logged in.
// window.location.href = "/users";
} }
</script> </script>
@ -124,6 +135,10 @@ export default defineEventHandler(async (event) => {
email: body.email, email: body.email,
password: passwordHash, password: passwordHash,
}); });
// log the user in as the user that was just created
const user = (await db.select().from(users).where(eq(users.email, body.email)).limit(1))[0];
await auth.login(event, user);
}); });
``` ```
@ -151,16 +166,28 @@ This is a very simple login form example, so you'd definitely want to add more v
error.value = null; error.value = null;
// perform the login // perform the login
await $fetch("/api/auth/login", { try {
method: "POST", await $fetch("/api/auth/login", {
body: form.value, method: "POST",
onResponseError: () => { body: loginForm.value,
error.value = "Error logging in"; });
}, } catch (e) {
}); // if there's an error, set the error message and return early
error.value = "Error logging in";
return;
}
// we're not using Nuxt Router here so that we can easily trigger a whole page load and get everything refreshed now that the user is logged in // refresh the session status now that the user is logged in
window.location.href = "/"; const { fetch } = useUserSession();
await fetch();
// you may want to use something like Pinia to manage global state of the logged-in user
// update Pinia state here...
// take the user to the auth-only users index page now that they're logged in
await navigateTo("/users");
// Alternative - Don't use Nuxt Router here so that we can easily trigger a whole page load and get the whole UI refreshed now that the user is logged in.
// window.location.href = "/users";
} }
</script> </script>
@ -221,7 +248,7 @@ import bcrypt from "bcrypt";
} }
// set the session // set the session
await setUserSession(event, { await replaceUserSession(event, {
user: { user: {
id: user.id, id: user.id,
name: user.name, name: user.name,