Page to route 404 with login - vue.js

Question

My problem is when I started using a router.beforeEach() he won't go to the page of 404 when I typ a not existing link. He just go to page with the defaukt layout I use. I use router.beforeEach() for checking if a user is logged in or not. Is there something missing, or is there something wrong?
This is my router.js
let router = new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'login',
component: () => import('./views/Login.vue'),
meta: {
layout: "empty"
},
},
{
path: '/home',
name: 'home',
component: () => import('./views/Home.vue'),
meta: {
requiresAuth: true
}
},
{
path: '/404',
name: '404',
component: () => import('./views/404.vue'),
meta: {
layout: "empty"
},
},
{
path: '*',
redirect: '/404'
},
{
path: '/*',
redirect: '/404'
}
]
});
router.beforeEach((to, from, next) => {
const isLoggedIn = JSON.parse(localStorage.getItem('UH'));
console.log(isLoggedIn);
const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
if (isLoggedIn === null){
if (requiresAuth && !isLoggedIn.user) {
next('/');
} else {
next();
}
} else {
next();
}
});

Answer 1

If I understand well your problem, when a user type something wrong in the url and is not logged in, this user is redirected to '/' instead of 404.
It's because the beforeEach hook is used before your route redirect {path: '*', redirect: '/404'} and your condition to redirect an user not logged in if the page requiresAuth is true.
To solve the problem, add an other condition like this:
if (isLoggedIn === null){
if (requiresAuth && !isLoggedIn.user) {
if (!to.matched.length) {
next('/404');
} else {
next('/');
}
} else {
next();
}
} else {
next();
}