Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhanced Route Guards for Improved Authorization Handling #12669

Open
mehdikhody opened this issue Sep 12, 2024 · 0 comments
Open

Enhanced Route Guards for Improved Authorization Handling #12669

mehdikhody opened this issue Sep 12, 2024 · 0 comments

Comments

@mehdikhody
Copy link

mehdikhody commented Sep 12, 2024

Describe the problem

Implementing route guards in SvelteKit currently involves manual validation in multiple server-side files (+page.server.ts, +server.ts for API routes), or adding a handler in hook.server.ts, which can be cumbersome and error-prone, especially for complex permission systems.

Describe the proposed solution

Here’s a proposal for enhanced route guards::

  1. Additional Guard Function: Introduce a new function in +page.server.ts that runs before the load function. This function would accept the request event and return a boolean (true or false), or a redirect (e.g., redirect(302, '/')) to handle redirection. If false is returned, a 403 Forbidden error would be thrown, preventing further execution of the load function. This would simplify and centralize authorization logic within page components.
  2. Inheritance of Guard Functions: Allow guard functions to inherit from parent routes (similar to how layouts propagate their behavior to child components). This would enable hierarchical authorization checks, ensuring that a page inherits and applies all necessary authorization rules from its parent routes.
  3. Improved Permission System Integration: Facilitate integration with permission systems by enabling developers to programmatically check if a user has access to specific routes. This would support dynamic UI elements such as hiding inaccessible URLs in navigation components (e.g., sidebar).
// +page.server.ts or +layout.server.ts
export const guard: Guard = async ({ locals }) => {
	// Implement your authorization logic here
	return locals.user.isAdmin;
};

export const load: PageServerLoad = async () => {
	return {}
}
<script lang="ts">
    import { hasPermission } from "@sveltejs/kit/routes"
</script>

{#if $hasPermission("/admin")}
    <a href="/admin">Admin Dashboard</a>
{/if}

Alternatives considered

No response

Importance

would make my life easier

Additional Information

These enhancements would significantly improve developer productivity by providing a more intuitive and integrated approach to managing route-specific authorization logic. By centralizing and inheriting authorization checks, developers can design more robust and secure applications with ease.

some libraries are sometimes used but often lack core API support, requiring additional maintenance.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant