Merhaba arkadaslar;
Mutlaka svelte-kit bilen ve yazan vardır;
uzun lafın kısası svelte-kit 1.0 dan sonra getSessıon() hook'u ve session storu kaldırdı. artık page actionlar hayatımıza girdi. Bende bu sebepten bir projem için ufak session kütüphanesi yarattım. Sizede tanıtmak istedim
Kaynak kodlarına buradan, npm sayfasına ise buradan erişebilirsiniz
###paketi yüklemek için
// npm
npm install svelte-kit-jwt-session
// yarn
yarn add svelte-kit-jwt-session
// pnpm
pnpm add svelte-kit-jwt-session
session hook'u
<font size="1">src/hooks.server/index.ts | js</font>
import { handleSession, type Payloads } from "svelte-kit-jwt-session";
const session = handleSession({
access: {
cookieName: "session",
cookieOptions: {
path: "/",
maxAge: 60 * 15 // 15 dk
},
secret: "interneteYuklenmemisCokGizliKey"
},
refresh: {
cookieName: "allins_session_reserved",
cookieOptions: {
path: "/",
maxAge: 60 * 60 * 24 * 7 // 1 hafta
},
secret: 'BudaGithubDaBulunmayanBaskaGizliBirKey'
}
})
export const handle: Handle = session
eğer birden fazla hook kullanacaksanız @sveltejs/kit.sequence metodunu kullanabilirsiniz
<font size="1">src/hooks.server/index.ts | js</font>
...
export const handle = sequence(anotherHook, session)
<font size="1">src/app.d.ts</font>
declare namespace App {
interface Locals {
session: import("svelte-kit-jwt-session").LocalType;
}
// interface PageData {}
// interface Error {}
// interface Platform {}
}
login olmak
import { type Action, type Actions, redirect } from "@sveltejs/kit"
import { login }from "svelte-kit-jwt-session";
const loginAction: Action = (event) => {
// işlemlerini yap ...
/**
* @param { import("svelte-kit-jwt-session").Payloads } payloads
*/
login({ accessPayload: { sub: "j@doe" , role: "admin"}, refreshPayload: { sub: "j@doe", role: "admin"}})
throw redirect(302, "/")
}
export const actions: {
login: loginAction
}
// login methodunun aldığı parametre bu şekilde
{
accessPayload: object & Record<string, unknown> | string,
refreshPayload: object & Record<string, unknown> | string
}
Otomatik login
eğer access token geçerliliğini kaybetmişse refresh token ile yeniden otomatik login olmak için session hook'unda ufak bir ekleme daha yapmak gerekiyor
<font size="1">src/hooks.server/index.ts | js</font>
const session = handleSession({
access: {...},
refresh: {...},
/**
* @param {JWTPayload | string} refreshToken
* @return { import("svelte-kit-jwt-session").Payloads }
*/
reauth: (refreshTokenPayload) => {
// refreshTokenPayload bize refresh tokenimizdeki degeri donuyor
// refresh tokeni kullanarak kullaniciyi tekrar dogrula ve loginDatasini return et
// ilk login olurken { accessPayload: { sub: "j@doe" , role: "admin"}, refreshPayload: { sub: "j@doe", role: "admin"}} seklinde bir data kullanmistim
// hali ile refreshToken payloadin bana : { sub: "j@doe", role: "admin"} bu datayi dondu, ayni veri ile tekrar yeni bir access ve refresh token oluşturuyorum
return {
accessPayload: refreshTokenPayload,
refreshPayload: refreshTokenPayload
}
}
})
session datasina erismek
session datasına herhangi bir serverHandler' ında veya action' ında locals.session altında erişebilirsiniz
<font size="1">src/routes/+layout.server.ts</font>
import type { ServerLoad } from "@sveltejs/kit";
export const load: ServerLoad = ({locals}) => {
// sessıon locals.session altında ulasılabılır durumda
return {
session: locals.session
}
}
her hangi bir svelte componentinde
<font size="1">src/routes/+page.svelte</font>
<script lang="ts">
import { page } from '$app/stores';
</script>
<header>
{#if $page.data.session.user}
{$page.data.session.user.sub}
{:else}
<a href="/login"> Login </a>
{/if}
</header>
alt sayfalarda
<font size="1">src/routes/user/profile/+page.server.ts</font> yada <font size="1">src/routes/user/profile/+page.ts</font>
export const load = async ({parent}) => {
const data = await parent()
return {
session: data.session
}
}