Appearance

External Uploads Mixin ​

File Information ​

  • Path: mixins/external-uploads.js
  • Purpose: External user upload functionality and authentication handling

Overview ​

The External Uploads mixin provides functionality for handling external user uploads, including authentication validation, workspace verification, and logout handling for external users. It ensures external users can only access their assigned workspace.

Key Features ​

  1. Authentication Validation

    • Workspace ID verification
    • Active user check
    • Workspace access validation

  2. Logout Handling

    • External user logout
    • Session cleanup
    • Request cancellation
    • Redirect handling

  3. Workspace Verification

    • Compares route workspace ID with user workspace
    • Redirects if mismatch
    • Prevents unauthorized access

Lifecycle Hooks ​

mounted() ​

Runs when component is mounted:

  • Checks if user is active
  • Verifies workspace ID matches user's workspace
  • Logs out and redirects if mismatch

Validation Logic:

javascript
if (
  this.$auth?.user?.is_active &&
  parseInt(this.$route.params?.workspace_id) !==
    parseInt(this.$auth?.user?.workspace_url_slug)
) {
  // Workspace mismatch - logout and redirect
  await this.logout()
}

Methods ​

logout() ​

Handles external user logout:

  • Calls authentication logout
  • Sets external user flag to false
  • Cancels all pending requests
  • Removes verification cookie
  • Cleans up localStorage
  • Redirects to request access page or home

Behavior:

  1. Gets workspace ID from route
  2. Calls $logout() method
  3. Sets externalUser flag to false
  4. Cancels all axios requests
  5. Removes verifyEmail cookie
  6. Cleans workspace-specific localStorage
  7. Redirects based on workspace ID

Redirect Logic:

  • If workspace ID exists: Redirects to request access page
  • Otherwise: Redirects to home page

Data Properties ​

The mixin doesn't add data properties, but uses:

  • $auth.user - Authentication user object
  • $route.params.workspace_id - Route workspace ID
  • workspaceId - Current workspace ID (from other mixins)

Usage Examples ​

Basic Usage ​

vue
<script>
import externalUploads from '~/mixins/external-uploads'

export default {
  mixins: [externalUploads],
  // Component automatically validates workspace on mount
  // Logout method available for manual logout
}
</script>

Manual Logout ​

vue
<template>
  <button @click="handleLogout">Logout</button>
</template>

<script>
import externalUploads from '~/mixins/external-uploads'

export default {
  mixins: [externalUploads],
  methods: {
    async handleLogout() {
      await this.logout()
      // User will be redirected automatically
    }
  }
}
</script>

Integration Points ​

  • External Upload Pages: Upload functionality
  • Authentication System: User validation
  • Request Cancellation: Axios request management
  • Router: Navigation and redirects

Security Considerations ​

  • Prevents external users from accessing wrong workspace
  • Validates workspace on component mount
  • Cleans up all session data on logout
  • Cancels pending requests on logout
  • Redirects to appropriate page after logout

Notes for Development ​

  • Mixin runs validation automatically on mount
  • Logout method handles all cleanup
  • Workspace validation prevents unauthorized access
  • Request cancellation prevents memory leaks
  • External user flag is managed by mixin