پیاده سازی کنترل دسترسی مبتنی بر نقش در SvelteKit

git clone https://github.com/TropicolX/svelte-rbac-demo.git
cd svelte-rbac-demo
git checkout starter
npm install

npm run dev

// src/constants.js
export const ROLES = {
    ADMIN: "admin",
    CUSTOMER: "customer",
};

export const PERMISSIONS = {
    CREATE_PRODUCTS: "create:products",
    UPDATE_PRODUCTS: "update:products",
    DELETE_PRODUCTS: "delete:products",
    READ_PROFILE: "read:profile",
    UPDATE_PROFILE: "update:profile",
};

// src/lib/rolePermissions.js
import { PERMISSIONS, ROLES } from "../constants";

export const rolePermissions = {
    [ROLES.ADMIN]: [
        PERMISSIONS.CREATE_PRODUCTS,
        PERMISSIONS.UPDATE_PRODUCTS,
        PERMISSIONS.DELETE_PRODUCTS,
    ],
    [ROLES.CUSTOMER]: [PERMISSIONS.READ_PROFILE, PERMISSIONS.UPDATE_PROFILE],
};

// src/lib/rbacUtils.js
import { rolePermissions } from "./rolePermissions";

// Function to check if a user has a specific role
export function checkRole(user, requiredRole) {
    if (!user) {
        return false;
    }

    return user.role === requiredRole;
}

// Function to check if a user has specific permissions
export function checkPermissions(user, requiredPermissions) {
    if (!user) {
        return false;
    }

    const userPermissions = rolePermissions[user.role];
    return userPermissions?.includes(requiredPermissions);
}

// Function to check if a user has both a specific role and permissions
export function checkRoleAndPermissions(
    user,
    requiredRole,
    requiredPermissions
) {
    return (
        checkRole(user, requiredRole) &&
        checkPermissions(user, requiredPermissions)
    );
}

<script>
    ...
    import Loading from "$lib/components/Loading.svelte";
    import { checkRole } from "$lib/rbacUtils";
    import { ROLES } from "../constants";
    import { user, cart, products } from "../stores";
    import "../app.css";

    ...
    $: isAdmin = checkRole($user, ROLES.ADMIN);
    $: isCustomer = checkRole($user, ROLES.CUSTOMER);
</script>

...

...

<header
    class="bg-gray-900 text-white py-4 px-6 md:px-12 flex items-center justify-between"
>
    ...
    <nav class="hidden md:flex items-center space-x-6">
        {#if isAdmin}
            <a class="hover:text-gray-300" href="/admin">Admin</a>
        {/if}
        {#if isCustomer}
            <a class="hover:text-gray-300" href="/user">Profile</a>
        {/if}
    </nav>
    ...
</header>

...

// src/routes/(protected)/admin/+layout.server.js
import { redirect } from "@sveltejs/kit";

import { checkRole } from "$lib/rbacUtils";
import { ROLES } from "../../../constants";

/** @type {import('./$types').LayoutServerLoad} */
export function load({ locals }) {
    const user = locals.user;
    const isAdmin = checkRole(user, ROLES.ADMIN);

    if (!isAdmin) {
        redirect(307, "/unauthorized");
    }
}

// src/routes/(protected)/user/+layout.server.js
import { redirect } from "@sveltejs/kit";

import { checkRoleAndPermissions } from "$lib/rbacUtils";
import { PERMISSIONS, ROLES } from "../../../constants";

/** @type {import('./$types').LayoutServerLoad} */
export function load({ locals }) {
    const user = locals.user;
    const isCustomerAndCanViewProfile = checkRoleAndPermissions(
        user,
        ROLES.CUSTOMER,
        PERMISSIONS.READ_PROFILE
    );

    if (!isCustomerAndCanViewProfile) {
        redirect(307, "/unauthorized");
    }
}

<script>
    import { checkPermissions } from "$lib/rbacUtils";
    import { PERMISSIONS } from "../../../constants";
    import { user, products } from "../../../stores";

    $: canCreateProducts = checkPermissions($user, PERMISSIONS.CREATE_PRODUCTS);
</script>

<div class="container mx-auto px-4 md:px-8 py-12">
    <div class="flex flex-wrap items-center justify-between mb-8">
        <h2 class="text-3xl md:text-4xl font-bold">Admin Dashboard</h2>
        {#if canCreateProducts}
            <button
                class="mt-4 min-[457px]:mt-0 inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2 bg-gray-900 text-white hover:bg-gray-800"
            >
                Add new product
            </button>
        {/if}
    </div>
    ...
</div>

// src/lib/rolePermissions.js
...

export const rolePermissions = {
    [ROLES.ADMIN]: [
        PERMISSIONS.UPDATE_PRODUCTS,
        PERMISSIONS.DELETE_PRODUCTS,
    ],
    ...
};

<script>
    ...
    $: canDeleteProducts = checkPermissions($user, PERMISSIONS.DELETE_PRODUCTS);
    $: canUpdateProducts = checkPermissions($user, PERMISSIONS.UPDATE_PRODUCTS);
</script>

...
<tbody class="[&_tr:last-child]:border-0">
    {#each $products as product (product.id)}
        <tr
            class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted"
        >
            ...
            <td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">
                <div class="flex items-center space-x-2">
                    {#if canUpdateProducts}
                        
                        <button
                            class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 w-10"
                        >
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                width="24"
                                height="24"
                                viewBox="0 0 24 24"
                                fill="none"
                                stroke="currentColor"
                                stroke-width="2"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                class="h-4 w-4"
                            >
                                <path
                                    d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"
                                ></path>
                            </svg>
                        </button>
                    {/if}

                    {#if canDeleteProducts}
                        
                        <button
                            class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 w-10"
                        >
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                width="24"
                                height="24"
                                viewBox="0 0 24 24"
                                fill="none"
                                stroke="currentColor"
                                stroke-width="2"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                class="h-4 w-4"
                            >
                                <path d="M3 6h18"></path>
                                <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"
                                ></path>
                                <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
                                ></path>
                            </svg>
                        </button>
                    {/if}
                </div>
            </td>
        </tr>
    {/each}
</tbody>
...

<script>
    import { checkPermissions } from "$lib/rbacUtils";
    import { PERMISSIONS } from "../../../constants";
    import { user } from "../../../stores";

    $: canEditProfile = checkPermissions($user, PERMISSIONS.UPDATE_PROFILE);

    let name = $user.name;
    let email = $user.email;
</script>

<div class="h-[calc(100svh-64px)] w-full flex items-center justify-center">
    <div
        class="rounded-lg border bg-card text-card-foreground shadow-sm w-[28rem] max-w-md"
    >
        ...
        <div class="p-6 space-y-4">
            <div class="space-y-2">
                ...
                <input
                    ...
                    disabled={!canEditProfile}
                />
            </div>
            <div class="space-y-2">
                ...
                <input
                    ...
                    disabled={!canEditProfile}
                />
            </div>
            <div class="space-y-2">
                ...
                <input
                    ...
                    disabled={!canEditProfile}
                />
            </div>
            <div class="space-y-2">
                ...
                <input
                    ...
                    disabled={!canEditProfile}
                />
            </div>
        </div>
        <div class="flex items-center p-6">
            <button
                ...
                disabled={!canEditProfile}
            >
                Save
            </button>
        </div>
    </div>
</div>