svelte-guard
is a versatile package designed to streamline the process of implementing route guards in SvelteKit applications. Route guards play a crucial role in ensuring that specific routes are accessible only to authorized users, enhancing the security of your application. With svelte-guard
, you can efficiently manage and implement route guards without cluttering your codebase with repetitive guard logic.
- ✅ Simplicity:
svelte-guard
simplifies the implementation of route guards by allowing you to define guards for individual routes within your project directory structure. - ✅ Flexibility: Guards can be implemented as synchronous or asynchronous functions, and requests can be redirected to a different route if necessary.
- ✅ Inheritance: Guards can be inherited from parent routes, allowing you to define a single guard for multiple routes.
- ✅ Extensibility: Alongside inheriting guards, you can also extend guards to add additional functionality to specific routes.
You can easily install svelte-guard
via npm
using the following command:
npm install svelte-guard
Implementing route guards with svelte-guard
involves two main steps: creating guard files and registering the guards.
app #
|-- routes #
| |-- login #
| | |-- -guard.ts # redirect if user is logged in
| | |-- +page.svelte #
| |-- admin #
| | | |-- settings #
| | | | |-- -guard.ts # extend parent guard
| | | | |-- +page.svelte #
| | |-- -guard.ts # protect admin route and sub-routes
| | |-- +page.svelte #
| |-- user #
| | |-- +page.svelte #
| |-- +page.svelte #
| |-- +layout.svelte #
|-- hooks.server.ts # register guards and hooks
This structure provides a clear separation of concerns, making it easy to manage and extend the route guarding functionality within SvelteKit applications.
Create guard files for your routes following the convention -guard.js
or -guard.ts
and place them within the respective route directories. These guard files encapsulate the authorization logic for each route and its child routes.
// routes/admin/-guard.ts
import type { Guard } from 'svelte-guard';
export const guard: Guard = async ({ locals }) => {
// Implement your authorization logic here
return locals.user.isAdmin;
};
Register the guards by creating a hook to handle app requests in the hooks.server.js
or hooks.server.ts
file. Utilize the createGuardHook
function provided by svelte-guard
to register the guards.
// hooks.server.ts
import { createGuardHook } from 'svelte-guard';
const guards = import.meta.glob('./routes/**/-guard.*');
export const handle = createGuardHook(guards);
If you have multiple hooks or need to execute guards in a specific sequence, you can utilize the sequence
function from @sveltejs/kit/hooks
to serialize the hooks.
// hooks.server.ts
import { sequence } from '@sveltejs/kit/hooks';
import { createGuardHook } from 'svelte-guard';
const guards = import.meta.glob('./routes/**/-guard.*');
const GuardHook = createGuardHook(guards);
export const handle = sequence(AuthHook, GuardHook);
Contributions to svelte-guard
are highly encouraged! Whether it's bug fixes, feature enhancements, or new ideas, your contributions are valuable. You can contribute by submitting bug reports, feature requests, or pull requests on GitHub.
For any questions, feedback, or support inquiries, feel free to reach out via the GitHub repository. We're here to help and improve the library together!
svelte-guard
is licensed under the MIT License. You can find the detailed licensing information in the LICENSE file.