ログアウト処理を実装する #11

Author: sinproject-iwasaki

src/routes/+layout.server.ts

@@ -0,0 +1,7 @@
+import type { LayoutServerLoad } from './$types'
+
+export const load: LayoutServerLoad = async ({ locals }) => {
+	return {
+		user: locals.user,
+	}
+}

src/routes/+layout.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { page } from '$app/stores'
+</script>
+
+<svelte:head>
+	<title> SvelteKit Authentication</title>
+</svelte:head>
+
+<nav>
+	{#if $page.data.user}
+	  <!-- <a href="/admin">Admin</a> -->
+
+		<form action="/logout" method="POST">
+			<button type="submit">Log out</button>
+		</form>
+	{:else}
+		<a href="/login">Log in</a>
+		<a href="/register">Register</a>
+	{/if}
+</nav>
+
+<main>
+	<slot />
+</main>

src/routes/+page.server.ts

@@ -1,5 +1,5 @@
 import type { PageServerLoad } from "./$types";
 
 export const load: PageServerLoad = async (event) => {
-	console.log(event)
+	// console.log(event)
 }

src/routes/+page.svelte

@@ -1,4 +1,3 @@
 <h1>Welcome to SvelteKit Authentication</h1>
 <p>Visit <a href="https://github.com/sinProject-Inc/sveltekit_authentication">GitHub Repository</a> to read the documentation</p>
 
-<button on:click={() => window.location.href = '/logout'}>Log out</button>

src/routes/login/+page.server.ts

@@ -1,10 +1,11 @@
+import { goto } from '$app/navigation'
 import { db } from '$lib/database'
 import type { Actions, PageServerLoad } from '.svelte-kit/types/src/routes/register/$types'
 import { invalid, redirect } from '@sveltejs/kit'
 import bcrypt from 'bcrypt'
 
-export const load: PageServerLoad = async () => {
-	// todo
+export const load: PageServerLoad = async ({ locals }) => {
+	if (locals.user) throw redirect(302, '/')
 }
 
 export const actions: Actions = {
@@ -37,7 +38,5 @@ export const actions: Actions = {
 			// secure: process.env.NODE_ENV === 'production',
 			httpOnly: true,
 		})
-
-		throw redirect(303, '/')
 	},
 }

src/routes/logout/+page.server.ts

@@ -0,0 +1,17 @@
+import { redirect, type Actions } from "@sveltejs/kit";
+import type { PageServerLoad } from "./$types";
+
+export const load: PageServerLoad = async () => {
+	throw redirect(302, "/")
+}
+
+export const actions: Actions = {
+	default: async ({ cookies }) => {
+		cookies.set('session_id', '', {
+			path: '/',
+			expires: new Date(0),
+		})
+
+		throw redirect(302, '/login')
+	}
+}

src/routes/register/+page.server.ts

@@ -8,8 +8,8 @@ enum Roles {
 	user = 'user',
 }
 
-export const load: PageServerLoad = async () => {
-	// todo
+export const load: PageServerLoad = async ({ locals }) => {
+	if (locals.user) throw redirect(302, '/')
 }
 
 export const actions: Actions = {
@@ -40,4 +40,3 @@ export const actions: Actions = {
 		throw redirect(303, '/login')
 	},
 }
-