Redirecting with the Location
header
I was stuck with a redirection not happening in a Nuxt middleware on a recent project:
export default defineNuxtRouteMiddleware((from, to) => {
const { isLoggedIn } = useAuth();
if (!isLoggedIn()) {
return navigateTo('/login', {
redirectCode: 401,
});
}
});
When trying to access a page without being logged in, instead of being redirected, the browser was displaying a message "Redirecting to /login". It turns out that using the 401
(unauthorized)status code was blocking the redirection specified in the response Location
header. The documentation on MDN is quite clear on the subject:
The
Location
response header indicates the URL to redirect a page to. It only provides a meaning when served with a3xx
(redirection) or201
(created) status response.
Changing the redirectCode
value from 401
to 302
(found) fixed the issue:
export default defineNuxtRouteMiddleware((from, to) => {
const { isLoggedIn } = useAuth();
if (!isLoggedIn()) {
return navigateTo('/login', {
- redirectCode: 401,
+ redirectCode: 302,
});
}
});
Although, I am not sure if this is the correct status code for an authentication middleware.