Appearance

Middleware Documentation ​

Overview ​

Middleware in Nuxt.js runs before rendering a page or layout. The Admin Frontend uses middleware for authentication, authorization, and route protection.

Middleware Location ​

All middleware files are located in the middleware/ directory and can be used in pages, layouts, or globally.

Authentication Middleware ​

authCheck ​

File: middleware/authCheck.js

Purpose: Validates user authentication and workspace access.

Functionality:

  • Checks if user is logged in
  • Validates workspace access
  • Redirects external users appropriately
  • Stores referring URL for post-login redirect

Usage:

javascript
middleware: ['authCheck']

onlyAuth ​

File: middleware/onlyAuth.js

Purpose: Ensures user is authenticated.

Functionality:

  • Checks authentication status
  • Redirects to login if not authenticated

Usage:

javascript
middleware: ['onlyAuth']

guestCheck ​

File: middleware/guestCheck.js

Purpose: Ensures user is not authenticated (for login/signup pages).

Functionality:

  • Checks if user is already logged in
  • Redirects to dashboard if authenticated

Usage:

javascript
middleware: ['guestCheck']

Permission Middleware ​

can-access-dam-module ​

File: middleware/can-access-dam-module.js

Purpose: Validates DAM module access and role.

Functionality:

  • Checks if workspace has DAM module enabled
  • Validates user has DAM access
  • Validates user has valid DAM role (admin, curator, or manager)
  • Redirects if access denied

Usage:

javascript
middleware: ['authCheck', 'can-access-dam-module']

can-access-dam-settings ​

File: middleware/can-access-dam-settings.js

Purpose: Validates access to DAM settings.

Functionality:

  • Checks DAM admin permissions
  • Validates workspace access
  • Redirects if not authorized

can-access-dam-subscription-billing ​

File: middleware/can-access-dam-subscription-billing.js

Purpose: Validates access to subscription/billing settings.

Functionality:

  • Checks subscription management permissions
  • Validates workspace admin access

can-access-general-settings ​

File: middleware/can-access-general-settings.js

Purpose: Validates access to general workspace settings.

Functionality:

  • Checks workspace admin permissions
  • Validates settings access

Workspace Middleware ​

check-workspace-access ​

File: middleware/check-workspace-access.js

Purpose: Validates user's access to the workspace ID in the URL.

Functionality:

  • Skips shared-assets routes and brand_name routes
  • Early check against accessibleWorkspaces list before any API calls
  • Calls check-workspace-access API for server-side validation
  • Redirects to correct accessible workspace on mismatch
  • Commits SET_WORKSPACE_ACCESS_VERIFIED to store to gate API calls

Usage:

javascript
middleware: ['authCheck', 'check-workspace-access']

checkWorkspace ​

File: middleware/checkWorkspace.js

Purpose: Validates workspace existence and access.

Functionality:

  • Checks workspace ID parameter
  • Validates workspace exists
  • Validates user has access to workspace
  • Redirects if invalid

DAM Instance Middleware ​

check-dam-instance ​

File: middleware/check-dam-instance.js

Purpose: Validates DAM instance exists and is accessible.

Functionality:

  • Checks DAM instance for workspace
  • Redirects to create instance if missing
  • Validates instance access

Status Middleware ​

check-if-suspended ​

File: middleware/check-if-suspended.js

Purpose: Checks if workspace or user is suspended.

Functionality:

  • Checks suspension status
  • Blocks access if suspended
  • Shows suspension message

Cloud Storage Middleware ​

gdrive-auth ​

File: middleware/gdrive-auth.js

Purpose: Handles Google Drive authentication flow.

Functionality:

  • Initiates OAuth flow
  • Handles OAuth callback
  • Stores authentication tokens

dropbox-auth ​

File: middleware/dropbox-auth.js

Purpose: Handles Dropbox authentication flow.

Functionality:

  • Initiates OAuth flow
  • Handles OAuth callback
  • Stores authentication tokens

box-auth ​

File: middleware/box-auth.js

Purpose: Handles Box.com authentication flow.

Functionality:

  • Initiates OAuth flow
  • Handles OAuth callback
  • Stores authentication tokens

External User Middleware ​

check-external-access ​

File: middleware/check-external-access.js

Purpose: Validates external user's workspace access via API for /external routes.

Functionality:

  • Only runs for authenticated external users on /external routes
  • Calls check-external-access API with origin URL
  • On access denied (or 401/402/403/404): logs out user and redirects to request-access page
  • Commits SET_WORKSPACE_ACCESS_VERIFIED to store to gate API calls

Usage:

javascript
middleware: ['authCheck', 'check-external-access']

external-guest-redirect ​

File: middleware/external-guest-redirect.js

Purpose: Redirects external guests appropriately.

Functionality:

  • Checks external user status
  • Redirects to appropriate external pages

external-otp-verify ​

File: middleware/external-otp-verify.js

Purpose: Validates external user OTP verification.

Functionality:

  • Checks OTP verification status
  • Redirects to verification if needed

external-upload-auth ​

File: middleware/external-upload-auth.js

Purpose: Validates external user upload access.

Functionality:

  • Checks external upload permissions
  • Validates upload access

Device Middleware ​

apple ​

File: middleware/apple.js

Purpose: Handles Apple-specific functionality.

Functionality:

  • Detects Apple devices
  • Handles Apple-specific features

Middleware Execution Order ​

When multiple middleware are specified, they execute in order:

javascript
middleware: [
  'authCheck',           // 1. Check authentication
  'checkWorkspace',      // 2. Validate workspace
  'can-access-dam-module', // 3. Check DAM access
  'check-dam-instance'    // 4. Check DAM instance
]

Middleware Best Practices ​

  1. Early Returns: Return early if condition fails
  2. Redirects: Use redirect() for route changes
  3. Errors: Use error() for error pages
  4. Context: Access $auth, route, store from context
  5. Async: Middleware can be async functions

Example Middleware ​

javascript
export default function ({ $auth, route, redirect }) {
  // Check authentication
  if (!$auth.loggedIn) {
    return redirect('/')
  }
  
  // Check workspace access
  const workspaceId = route.params.workspace_id
  const hasAccess = $auth.user.accessibleWorkspaces.some(
    w => w.id === workspaceId
  )
  
  if (!hasAccess) {
    return redirect('/')
  }
}