Location>code7788 >text

Creating Route Middleware with defineNuxtRouteMiddleware

Popularity：866 ℃/2024-08-10 10:11:06

title: Creating Route Middleware with defineNuxtRouteMiddleware
date: 2024/8/10
updated: 2024/8/10
author: cmdragon

excerpt:
This post describes how to use thedefineNuxtRouteMiddleware Create and apply routing middleware. The examples demonstrate how to handle error pages and authentication logic. With an understanding of middleware, you can have more flexibility in controlling the routing behavior of your application to enhance the user experience.

categories:

  • front-end development

tags:

  • Nuxt3
  • routing (in computer networks)
  • middleware
  • error handling
  • accreditation
  • redirects
  • Customized Logic

image
image

scanningtwo-dimensional barcodeFollow or microsoft search:Programming Intelligence Front-End to Full-Stack Communication and Growth

Creating Route Middleware with defineNuxtRouteMiddleware

In , routing middleware is a powerful mechanism for handling specific logic before routing into it. For example, you can redirect users based on their authentication status, or display an error page if certain conditions are not met.

What is routing middleware?

Routing middleware is a function that executes before routing changes and allows us to add logic when accessing a specific page. It helps you in authentication, authorization checking, logging etc.

Architecture of routing middleware

The basic structure of the routing middleware is shown below:

const middleware = (to, from) => {
  // processing logic
};

export default defineNuxtRouteMiddleware(middleware);
  • to: The location object for the next route.
  • from: The location object for the current route.

Creating and using routing middleware

1. Middleware for displaying error pages

We first create a middleware that detects a specific condition and displays an error page. If the parameterid exists and is1, we will throw a 404 error.

establishmiddleware/ 


export default defineNuxtRouteMiddleware((to) => {
  if ( === '1') {
    throw createError({ statusCode: 404, statusMessage: 'Page not found' });
  }
});

In this example, if the route accessed by the user contains the parameterid and its value is1, then a 404 error is thrown and Nuxt automatically redirects to the defined error page.

2. Redirection based on authentication status

Next, we create a middleware that checks if the user has been authenticated. If not authenticated, the user will be redirected to the login page.

establishmiddleware/ 


export default defineNuxtRouteMiddleware((to, from) => {
  const auth = useState('auth'); {

  // Check if the user is logged in
  if (!) {
    return navigateTo('/login'); // redirect to login page
  }

  // If the user is not on the dashboard page, redirect to the dashboard
  if ( ! == '/dashboard') {
    return navigateTo('/dashboard');
  }
}).

In the code above, we useuseState Get the authentication status of the user. If the user is not logged in, we use thenavigateTo Perform a redirection to direct/login Page. If the user is not on the dashboard page, we also redirect them to the dashboard.

Registration of middleware

After the middleware has been created, Nuxt automatically recognizes the middleware in themiddleware/ middleware files in the directory. You can use the middleware by specifying them in a page component. For example, use the above middleware in a page component:

Using Middleware in Pages

<template>
  <div>
    <h1>Welcome to the dashboard.</h1>
  </div>
</template>

<script>
definePageMeta({
  middleware: ["auth"]
  // maybe middleware: 'auth'
})
</script>

Global use of middleware

If you want to make each route use a certain middleware, you can add a new middleware to the Register the global middleware in the file

summarize

Routing middleware is useful in managing user access rights and error handling. Routing middleware can be used to manage user access rights and error handling through thedefineNuxtRouteMiddlewareYou can easily define middleware that controls how users flow through a Nuxt application.

For the rest of the article, please click to jump to the personal blog page or scan the code to follow or WeChat search:Programming Intelligence Front-End to Full-Stack Communication and Growth, read the full article:Creating Route Middleware with defineNuxtRouteMiddleware | cmdragon's Blog

Past articles are archived:

  • Defining Vue Components with defineNuxtComponent` | cmdragon's Blog
  • Detailed Guide to Creating Error Objects with createError | cmdragon's Blog
  • Clear Nuxt state cache: clearNuxtState | cmdragon's Blog
  • Clear Nuxt Data Cache: clearNuxtData | cmdragon's Blog
  • Clearing processed errors with clearError | cmdragon's Blog
  • Dynamically Adding Middleware with addRouteMiddleware | cmdragon's Blog
  • Blocking Navigation with abortNavigation | cmdragon's Blog
  • HTTP request using $fetch | cmdragon's Blog
  • Managing Responsive State with useState | cmdragon's Blog
  • Optimize your website for SEO with useServerSeoMeta | cmdragon's Blog
  • SEO Configuration with useSeoMeta | cmdragon's Blog
  • Must Read: Runtime Configuration Made Easy with useRuntimeConfig | cmdragon's Blog
  • Route Management: The useRouter Method and Routing Middleware Applications | cmdragon's Blog
  • UseRoute Function Details and Examples | cmdragon's Blog
  • Accessing a request URL using the useRequestURL combinatorial function | cmdragon's Blog
  • Configuring and Using Environment Variables | cmdragon's Blog
  • Data fetching in server-side rendering: combining useRequestHeaders and useFetch | cmdragon's Blog
  • Accessing Request Events with the useRequestEvent Hook | cmdragon's Blog
  • Efficient Data Acquisition and Management with useNuxtData | cmdragon's Blog
<Previous Next>