"Agressive" error hack #58
Description
I found a simpler way to put my application in maintenance mode:
store/index.js
export const actions = {
async nuxtServerInit({ commit }, { app, route, redirect, error }) { // Compatible SSR
const maintenance = true // Your business logic here to set maintenance status
if (
maintenance
&& route.name !== 'login' // Allow access to custom route here
&& !app.$auth.loggedIn // Handle your auth logic: authorize admin...
) {
redirect('/maintenance') // Need this to catch route in error.vue
error({ statusCode: 503 }) // 💣 Throw error with 503 code for SEO!
}
})
}layouts/error.vue
Write error page like you want. Just add this layout function.
<script>
export default {
layout(context) {
if (context.route.name === 'maintenance') return 'maintenance'
}
}
</script>layouts/maintenance.vue
<template>
<div>
My awesome maintenance page
</div>
</template>pages/maintenance.vue
// create blank page only to prevent nuxt router errorBy this way, it's possible to put app in maintenance mode while allowing access to certain page for authorized users. This module cannot do that, and the whole process is easier to read...
Is there something wrong with this little hack?
Maybe we don't need redirect in nuxtServerInit, but I don't know how to get error statusCode or error message in layout(context)...