Nuxt.js API Routes Route Guard Lifecycle Management

Types of Route Guards

In Nuxt.js, route guards are categorized into global guards and route-specific guards, which serve permission control at the global level and the route level respectively.

  • Global Guards: Cover all routes, such as permission verification and page initialization, implemented via hooks like beforeEach and beforeEnter from vue-router.
  • Route Guards: Target access control for specific routes, such as allowing only logged-in users to access certain API interfaces, implemented via hooks like beforeRouteEnter and beforeRouteLeave.

Association of Lifecycle Hooks with API Routes

Nuxt.js route guards support lifecycle hooks, allowing developers to implement more granular control logic through these hooks.

  • beforeRouteEnter: Triggered before a route is entered, used for checking user permissions or data preparation status, commonly utilized for dynamic component loading.
  • beforeRouteLeave: Triggered before leaving a route, used for cleaning up resources or prompting user actions, such as confirming whether to save data.
  • beforeEnter: Specific to the route hierarchy of route guards, used to verify route validity and prevent access to illegal paths.

Special Requirements for API Routes

In API routes, route guards must combine with data loading mechanisms to implement more complex logic.

  • Dynamic Route Parameters: When passing parameters via params, guards must validate parameter legality to prevent errors caused by invalid values.
  • Cross-Origin Requests: In API routes, guards must handle interception of cross-origin requests, for example, by checking in beforeRouteEnter whether cross-origin access is allowed.
  • Permission Control: Combined with user authentication status, guards can dynamically determine if a user has access permissions, such as allowing only administrators to access specific interfaces.

Practical Application Scenarios

  1. Permission Verification: Check user login status via beforeRouteEnter; redirect to the login page if not logged in.
  2. Data Loading Pre-check: Preload data within beforeRouteEnter to avoid blank screens during page rendering.
  3. Route Navigation Confirmation: Prompt users in beforeRouteLeave to save data, preventing accidental loss.
  4. Dynamic Route Parameter Validation: When passing IDs via params, guards must verify if the ID is a valid number to prevent illegal input.

Code Examples

// Global Guard Example (beforeEach)  
beforeEach((to, from, next) {  
  if (to.path === '/admin') {  
    if (!localStorage.getItem('token')) {  
      next('/login')  
    } else {  
      next()  
    }  
  } else {  
    next()  
  }  
})

// Route Guard Example (beforeRouteEnter)  
beforeRouteEnter((to, from, next) {  
  if (to.params.id) {  
    // Validate ID validity  
    if (!/^\d+$/.test(to.params.id)) {  
      next('/404')  
    } else {  
      next()  
    }  
  } else {  
    next('/404')  
  }  
})

Best Practices

  • Separate Guard Logic: Separate global guard logic from route-specific guard logic to avoid confusion.
  • Use Vue Router Navigation Guards: Prioritize guards provided by vue-router over Nuxt.js native hooks to maintain code maintainability.
  • Combine with Data Loading Strategies: Preload data in beforeRouteEnter to enhance user experience.
  • Logging: Log access information within guards to facilitate troubleshooting later.