raymondmuller / momentum-lock

Momentum Lock

Momentum Lock is a Laravel package that lets you handle Laravel authorizations on the frontend level.

The package is only intended to work with Laravel Data objects and TypeScript Transformer.

• Installation
  • Laravel
  • Frontend
• Usage
• Advanced Inertia
• Momentum

Installation

Laravel

Install the package into your Laravel app.

composer require based/momentum-lock

Frontend

The frontend package is framework-agnostic and will work great within any TypeScript-powered workflow.

Install the frontend package.

npm i momentum-lock
# or
yarn add momentum-lock

Usage

Extend your data classes from DataResource instead of Data provided by Laravel Data.

use Momentum\Lock\Data\DataResource;

class UserData extends DataResource
{
    public function __construct(
        public int $id,
        public string $username
    ) {
    }
}

You can either specify the list of abilities manually, or let the package resolve them from the corresponding policy class.

class UserData extends DataResource
{
    protected $permissions = ['update', 'delete'];
}

Register DataResourceCollector in the TypeScript Transformer configuration file — typescript-transformer.php. This class helps TypeScript Transformer handle DataResource classes and append permissions to generated TypeScript definitions.

return [
    'collectors' => [
+       Momentum\Lock\TypeScript\DataResourceCollector::class,
        Spatie\TypeScriptTransformer\Collectors\DefaultCollector::class,
        Spatie\LaravelData\Support\TypeScriptTransformer\DataTypeScriptCollector::class,
    ],
]

On the frontend, you can use the helper can. This function checks whether the required permission is set to true on the passed object, and can be used in both scripts or templates.

<script lang="ts" setup>
import { can } from "momentum-lock"

const props = defineProps<{
  users: UserData[]
}>()
</script>

<template>
  <div v-for="user in users" :key="user.id">
    <a v-if="can(user, 'edit')" :href="route('users.edit', user)"> Edit </a>
  </div>
</template>

Advanced Inertia

Take your Inertia.js skills to the next level with my book Advanced Inertia. Learn advanced concepts and make apps with Laravel and Inertia.js a breeze to build and maintain.

Momentum

Momentum is a set of packages designed to improve your experience building Inertia-powered apps.

• Modal — Build dynamic modal dialogs for Inertia apps
• Preflight — Realtime backend-driven validation for Inertia apps
• Paginator — Headless wrapper around Laravel Pagination
• Trail — Frontend package to use Laravel routes with Inertia
• Lock — Frontend package to use Laravel permissions with Inertia
• Layout — Persistent layouts for Vue 3 apps
• Vite Plugin Watch — Vite plugin to run shell commands on file changes

Credits

• Boris Lepikhin
• All Contributors

License

The MIT License (MIT). Please see License File for more information.