[Vuejs]-Need Help in Router Guard Navigation in Vuejs

There could be many solutions, one of the best I found is like this.
create two middleware’s (auth and guest), import them in router and use them in meta tags of routes as per your requirement. please modify authentication logic as per your app ( here localStorage token is used)

1. /middlewares/auth.js (applied to authenticated pages in router.js – here dashboard)

   export default function auth({next, router}) 
   { if (!localStorage.getItem('token')) { return router.push({name: 'login'});  }
     return next();
   }
   

2. /middlewares/guest.js (applied to unauthenticated pages in router.js)

   export default function guest({next, router}) 
   { if (localStorage.getItem('token')) { return router.push({name: 'dashboard'}); }
   return next();
   }
   

3. /middlewares/index.js (export these two middlewares)

   import auth from './auth';
   import guest from './guest';
   export default { auth, guest}
   

4. router.js (add middlewares in meta tag, check middlewares and apply in beforeEach)

   import Vue from 'vue'
   import VueRouter from 'vue-router'
   import Home from '../views/pages/Home.vue' 
   import Middlewares from "../middlewares/";
   
   Vue.use(VueRouter)
   
   const routes = [
   { path: '/', name: 'Home', component: Home },
   { path: '/login', name: 'login',  component: () => import('../views/auth/Login.vue'), meta: {  middleware: [Middlewares.guest]}},
   { path: '/register', name: 'register', component: () => import('../views/auth/Register.vue'), meta: {  middleware: [Middlewares.guest]}},
   { path: '/dashboard', name: 'dashboard', component: () => import('../views/pages/Dashboard.vue'), meta: {  middleware: [Middlewares.auth]}},
   ]
   
   const router = new VueRouter({
    mode: 'history', base: process.env.BASE_URL, routes
   })
   
   function nextCheck(context, middleware, index) {
   const nextMiddleware = middleware[index];
   if (!nextMiddleware) return context.next;
   return (...parameters) => {
   context.next(...parameters);
   const nextMidd = nextCheck(context, middleware, index + 1);
   nextMiddleware({...context, next: nextMidd});
   }
   }
   
   router.beforeEach((to, from, next) => {
   if (to.meta.middleware) {//if meta tag exist on route do this else return next
   const middleware = Array.isArray(to.meta.middleware) ? to.meta.middleware :  [to.meta.middleware];
   const ctx = { from,next,router,to};
   const nextMiddleware = nextCheck(ctx, middleware, 1);
   return middleware[0]({...ctx, next: nextMiddleware});
   }
   return next();
   });
   
   export default router