Roles and Permissions Module - Nuxt 3

Permite la validación de roles y permisos de un usuario autenticado

Este paquete es una adapatación basado en el paquete nuxt-permissions donde se guardan los datos en cookies para permitir las validaciones con ssr

Instalación

npm i qsofting-roles-permission

Agrega el módulo en la configuración the nuxt.config.[js,ts],

export default defineNuxtConfig({
  modules: [
    'qsofting-roles-permission'
    // ...
  ]
})

Uso

Configuración de permisos y roles de usuario

Para establecer permisos o roles de usuario, debe usar un elemento componible setPermissions o setRoles, que almacena una matriz de cadenas para permisos o roles.

Tambien puede usar getPermissions o getRoles para obtener las listas de los permisos y roles respectivamente

const user = await login() // your login functionality
setPermissions(user.permissions) // ['read posts', ..., 'delete posts']
setRoles(user.roles) // ['admin', 'editor']

Middleware usage

Para usar el módulo, debe configurar nuxt-permissions como middleware y agregar permissions o roles en definePageMeta. Por ejemplo, para el panel de administración, establecería roles en ['admin'] y/o permisos en ['access panel'], dependiendo de la configuración de su backend.

Puede utilizar una combinación de ambos, pero los permisos tienen mayor prioridad que los roles.

Si no se establecen roles o permisos, el acceso a esa página no está restringido.

// ~/pages/admin/dashboard
definePageMeta({
  middleware: [
    'auth', // your auth middleware
    'roles-permission'
  ],
  roles: ['admin'],
  permissions: ['access dashboard']
})

Directives

Las directivas pueden ser una cadena o una matriz de cadenas. Si se pasa una matriz, solo es necesario aplicar un elemento para que se cumpla la condición.

v-can

Funciona como v-if pero para los permisos

<button v-can="'edit posts'">
  Edit
</button>
<!-- or -->
<button v-can="['edit posts', 'view posts']">
  View or edit
</button>

v-can:not

Funciona como v-if negado pero para los permisos

<div v-can:not="'edit posts'">
  You do not have permissions to edit this post
</div>
<!-- or -->
<div v-can:not="['edit posts', 'view posts']">
  You do not have permissions to edit nor view this post
</div>

v-role

Funciona como v-if pero para roles

<div v-role="'admin'">
  You are admin
</div>
<!-- or -->
<div v-role="['admin', 'editor']">
  You are admin or editor
</div>

v-role:not

Funciona como v-if negado pero para roles

<div v-role:not="'admin'">
  You are not admin
</div>
<!--  -->
<div v-role:not="['admin', 'editor']">
  You are not admin nor editor
</div>

Development

• Run npm run dev:prepare to generate type stubs.
• Use npm run dev to start playground in development mode.
• Use npm run test to run tests.