The middleware directory

The /middleware/ directory is used to contain middleware files that are JavaScript functions that run before rendering a page or a group of pages. For example, you may want to have a secret page that only can be accessed when the user is authenticated. You can use the Vuex store to store the authenticated data and create a middleware to throw a 403 error if the auth property is empty in the state store:

// middleware/auth.js
export default function ({ store, error }) {
  if (!store.state.auth) {
    error({
      message: 'You are not connected',
      statusCode: 403
    })
  }
}

We will look at this directory in more detail in Chapter 11, Writing Route Middlewares and Server Middlewares.