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.
Install the package into your Laravel app.
composer require based/momentum-lock
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
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>
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 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
The MIT License (MIT). Please see License File for more information.