Nuxt session handling

session_handling.txt

/composables/useSess.ts

import {useSession} from h3

export default useSess(event)
	return useSession(event, useRunimeConfig().session);



/nuxt.config.ts
{
	runtimeConfig: {
		session: {
			sessionKey: ...,
			cookie blabla ...
			...
		}
	}
}


/server/api/login.post.ts
export default defineEventHandler( (event) => {
	let session = await useSess(event);

	let {username, userpassword} = readBody(event);

	let user = useSqlTryLogin(username, userpassword); //  ... database check mit username + pw => resolves to user ... or console.error
	
	if (user) {
		delete user.password;

		sesion.update({
			isLoggedIn: true,

			user: user, // id, username ...
		});

		return {success: true, user};
	}
	else { 
		return {success: false, user: null};
	}
});


/server/api/isloggedIn.ts
// use on on mounted to reload user data if state('user') is emtpy 
export ...

	let session = await useSess(event);

	return {success: session.data?.isloggedin: false, user: session.data };



/server/api/logout.ts
// to kill session 
export ...

	let session = await useSess(event);

	session.clear();

	return {success: true };


/components/LogoutButton.vue
button@click="logout"

data()
	isLoggedIn: useState('isLoggedIn', () => false),
	userInfo: useState('userInfo', () => ({})),

methods:

	async logout() {
		await fetch('/api/logout');

		this.isLoggedIn = false;
		this.userInfo = {};

		useRouter().push('/');
	}


/app.vue
data() {
	
	return {
		isLoggedIn: useState('isLoggedIn', () => false),
		userInfo: useState('userInfo', () => ({})),
	}

}

async onMounted() {
	
	let userResult = await $fetch('/api/isLoggedIn'):

	if (userResult.success) {
		this.isLoggedIn = true;
		this.userInfo = userResult.user;
	}
	else {
		useRouter().push('/login');
	}

}



/pages/blaa.vue


data()
	isLoggedIn: useState('isLoggedIn', () => false),
	userInfo: useState('userInfo', () => ({})),


<template>

div(v-if="isLoggedIn")
	NavUser
		i.fa.fa-user
		|  {{ userInfo.username }}

		LogoutButton

div(v-else)
	NavGeneric


div
	...content