Integración con Next.js

En esta sección, aprenderás cómo integrar @casl/ability en tu proyecto Next.js para gestionar permisos y autorizaciones en el frontend, asegurando que las interfaces de usuario respondan a los permiso

Paso 1: Instalación de Dependencias

Instala las dependencias necesarias para @casl/ability en tu proyecto Next.js.

npm install @casl/ability @casl/react

Paso 2: Definición de Habilidades

Crea una función para definir las habilidades en tu proyecto Next.js.

ability.js:

import { Ability } from '@casl/ability';

export const ability = new Ability();

export function defineAbilitiesFor(user) {
  const { can, cannot } = ability;

  if (user.isAdmin) {
    can('manage', 'all');
  } else {
    can('read', 'Article');
    can('update', 'Article', { authorId: user.id });
    cannot('delete', 'Article');
  }

  return ability;
}

Paso 3: Uso de CASL en Componentes

Utiliza @casl/react para gestionar la autorización en tus componentes React.

Ejemplo de Componente:

import { useAbility } from '@casl/react';
import { ability } from '../ability';

const ArticleComponent = ({ article, user }) => {
  const userAbility = defineAbilitiesFor(user);
  const canUpdate = userAbility.can('update', article);

  return (
    <div>
      <h1>{article.title}</h1>
      <p>{article.content}</p>
      {canUpdate && <button>Edit Article</button>}
    </div>
  );
};

export default ArticleComponent;

Paso 4: Inyección de Habilidades en SSR

Para las páginas que se renderizan del lado del servidor, asegúrate de inyectar las habilidades correctamente.

Ejemplo de Página:

import { defineAbilitiesFor } from '../ability';

const ArticlePage = ({ article, user }) => {
  const userAbility = defineAbilitiesFor(user);

  return (
    <ArticleComponent article={article} user={user} />
  );
};

export async function getServerSideProps(context) {
  const user = await getUserFromSession(context.req); // Implementa tu lógica de obtención de usuario
  const article = await getArticleFromDB(context.params.id); // Implementa tu lógica de obtención de artículo

  return {
    props: {
      user,
      article,
    },
  };
}

export default ArticlePage;