Appearance

Role-Based Access ​

Overview ​

The Role-Based Access Control (RBAC) system provides fine-grained permission management with roles, permissions, and access rules for different modules and resources. It ensures users only have access to features and data appropriate for their role.

Architecture ​

Role Hierarchy ​

  1. Super Admin: Full system access
  2. Workspace Admin: Full workspace access
  3. DAM Admin: Full DAM module access
  4. DAM Curator: Content management access
  5. DAM Manager: Limited management access
  6. Viewer: Read-only access
  7. Guest: Limited guest access

Permission Structure ​

Permission Types ​

javascript
{
  // Module Access
  "can-access-dam-module": true,
  
  // Asset Permissions
  "can-view-assets": true,
  "can-create-assets": true,
  "can-edit-assets": true,
  "can-delete-assets": false,
  "can-share-assets": true,
  "can-download-assets": true,
  
  // Folder Permissions
  "can-view-folders": true,
  "can-create-folders": true,
  "can-edit-folders": true,
  "can-delete-folders": false,
  
  // Settings Permissions
  "can-access-settings": false,
  "can-manage-users": false,
  "can-manage-subscription": false
}

Frontend Implementation ​

Permission Middleware ​

javascript
// middleware/can-access-dam-module.js
export default async function ({ route, store, redirect, $auth }) {
  const user = $auth.user
  const workspaceId = route.params.workspace_id
  
  // Check workspace access
  const hasWorkspaceAccess = user.accessibleWorkspaces.includes(workspaceId)
  if (!hasWorkspaceAccess) {
    return redirect('/')
  }
  
  // Check DAM module access
  const hasDamAccess = user.permissions.includes('can-access-dam-module')
  if (!hasDamAccess) {
    return redirect(`/${workspaceId}`)
  }
  
  // Check role
  const damRole = user.workspaceRoles?.[workspaceId]?.dam_role
  const validRoles = ['admin', 'curator', 'manager']
  if (!validRoles.includes(damRole)) {
    return redirect(`/${workspaceId}`)
  }
}

Permission Check Component ​

vue
<template>
  <div>
    <v-btn
      v-if="canCreate"
      @click="createAsset"
    >
      Create Asset
    </v-btn>
    <v-btn
      v-if="canDelete"
      @click="deleteAsset"
      color="error"
    >
      Delete
    </v-btn>
  </div>
</template>

<script>
export default {
  computed: {
    canCreate() {
      return this.$auth.user.permissions.includes('can-create-assets')
    },
    canDelete() {
      return this.$auth.user.permissions.includes('can-delete-assets')
    }
  }
}
</script>

API Design ​

Get User Permissions ​

Endpoint: GET /api/users/:user_id/permissions

Query Parameters:

  • workspace_id (required) - Workspace identifier

Response:

json
{
  "permissions": [
    "can-access-dam-module",
    "can-view-assets",
    "can-create-assets",
    "can-edit-assets",
    "can-share-assets"
  ],
  "role": "dam_curator",
  "workspace_id": 123
}

Role Definitions ​

DAM Admin ​

  • Full access to all DAM features
  • Can manage users and permissions
  • Can access settings
  • Can delete any content

DAM Curator ​

  • Can create, edit, and organize assets
  • Can manage folders and collages
  • Cannot delete content
  • Cannot access settings

DAM Manager ​

  • Can view and download assets
  • Can create folders
  • Limited editing permissions
  • Cannot delete content

Workflow ​

Permission Check Flow ​

1. User navigates to route
   ↓
2. Middleware checks authentication
   ↓
3. Middleware checks workspace access
   ↓
4. Middleware checks module access
   ↓
5. Middleware checks role permissions
   ↓
6. If all checks pass → Render page
   ↓
7. If check fails → Redirect to appropriate page