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
Locationresponse 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.