Access Control

Uno Admin use CASL package to provide access control in our template. It's designed to be incrementally adoptable and can easily scale between a simple claim based and fully featured subject and attribute based authorization. It makes it easy to manage and share permissions across UI components, API services, and database queries.

Overview

CASL operates on the abilities level, that is what a user can actually do in the application. In Uno Admin, an ability itself depends on the 2 parameters:

• subject The subject or subject type which you want to check user action on. Usually this is a business (or domain) entity (e.g., Subscription, Article, User). The relation between subject and subject type is the same as relation between an object instance and its class.
• action Describes what user can actually do in the app. User action is a word (usually a verb) which depends on the business logic (e.g., prolong, read). Very often it will be a list of words from CRUD - create, read, update and delete. You can find access control layer in @core/permissions directory.

Permissions Layer

Uno Admin has a layers to manager all ACL in template. This layers provider the below:

Pages

• Roles Page: This page allows an admin user to create and manage all application functions.
• Permissions Page: This page allows an admin user manager all permissions on the application.
• Grant Page: This page allows an admin user manager roles's permissions on the application.

Config Files

• @core/permissions/plugins/config.ts : It has initial configuration to integrate the CASL with nuxt.
• @core/permissions/composables/usePermission.ts: This file provides useAbility composable for ease so you don't have to import ability from ability.ts file.
• @core/permissions/middleware/check.global.ts: We uses this middleware to check permission, so users can only visit the route they have ability to.

Using ACL

Route Protection

For protecting routes based on ability, all you have to do is add rules meta with de subject and action property to definePage macro block. Let's add action & subject in rules meta to this route by updating the file as below:

<script lang="ts" setup>
definePageMeta({
  action: 'read',
  subject: 'Dashboard',
})
</script>

<template>
  <p>This is a dashboard page.</p>
</template>

Show/hide Elements

<script lang="ts" setup>

const rules = {
  action: 'read' as const,
  subject: 'Admin' as const,
}

</script>

<template>
  <p v-if="$can(rules.action, rules.subject)">
    We have permission to view this element
  </p>
  <p v-else>
    You don't have enough permission to view this element
  </p>
</template>

Updating ability

// Use composable
const ability = useAbility()

// Update the ability using `update` method
ability.update(userAbilities)