This is a simple package for integrating roles and permissions with a Nuxt application. It is designed to complement backend permissions, and should not be used as the sole solution.
Please note that this is alpha quality software and should not be used in production. This package is a work in progress and is subject to change.
yarn add nuxt-permissions
# or
npm i nuxt-permissionsIntroduce the module into the nuxt.config.[js,ts]. and set ssr to false
export default defineNuxtConfig({
ssr: false,
modules: [
'nuxt-permissions'
// ...
]
})To set user permissions or roles, you must use a usePermissions or useRoles composable, that contains an array of strings for permissions or roles.
const userPermissions = usePermissions()
const userRoles = useRoles()
const user = await login() // your login functionality
userPermissions.value = user.permissions // ['read posts', ..., 'delete posts']
userRoles.value = user.roles // ['admin', 'editor']To use the module, you must set nuxt-permissions as middleware and add permissions or roles in definePageMeta. For example, for the admin dashboard, you would set roles to ['admin'] and/or permissions to ['access dashboard'], depending on your backend settings.
You can use a combination of both, but permissions have higher priority than roles.
If roles or permissions are not set, access to that page is unrestricted.
// ~/pages/admin/dashboard
definePageMeta({
middleware: [
'auth', // your auth middleware
'nuxt-permissions'
],
roles: ['admin'],
permissions: ['access dashboard']
})Directives can be a string or an array of strings. If an array is passed, only one item needs to apply for the condition to be fulfilled.
Works as v-if but for permissions
<button v-can="'edit posts'">
Edit
</button>
<!-- or -->
<button v-can="['edit posts', 'view posts']">
View or edit
</button>Works as negated v-if but for permissions
<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>Works as v-if but for roles
<div v-role="'admin'">
You are admin
</div>
<!-- or -->
<div v-role="['admin', 'editor']">
You are admin or editor
</div>Works as negated v-if but for roles
<div v-role:not="'admin'">
You are not admin
</div>
<!-- -->
<div v-role:not="['admin', 'editor']">
You are not admin nor editor
</div>- Run
npm run dev:prepareto generate type stubs. - Use
npm run devto start playground in development mode. - Use
npm run testto run tests.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent