vue-route-middleware

import Vue from 'vue'; import VueRouter from 'vue-router'; import VueRouteMiddleware from 'vue-route-middleware'; Vue.use(VueRouter); // Simulate user login status and payment status const fakeUser = { isLogged: () => localStorage.getItem('isLoggedIn') === 'true', madePayment: () => localStorage.getItem('hasPaid') === 'true' }; // Define dummy components const Dashboard = { template: '<div><h1>Dashboard</h1><p>Welcome, {{ isLoggedIn ? "User" : "Guest" }}!</p></div>' }; const Login = { template: '<div><h1>Login Page</h1><p>Set isLoggedIn=true in localStorage to proceed.</p></div>' }; const Payment = { template: '<div><h1>Payment Page</h1><p>Set hasPaid=true in localStorage to proceed.</p></div>' }; const Home = { template: '<div><h1>Home Page</h1><p>Navigate to /dashboard.</p></div>' }; // Define middleware functions const AuthMiddleware = (to, from, next) => { console.log('Running AuthMiddleware...'); if (!fakeUser.isLogged()) { next({ name: 'Login' }); // Redirect to login return false; // Crucial: stop middleware chain } next(); // Continue if authenticated }; const PaymentMiddleware = (to, from, next) => { console.log('Running PaymentMiddleware...'); if (!fakeUser.madePayment()) { next({ name: 'Payment' }); // Redirect to payment return false; // Crucial: stop middleware chain } next(); // Continue if payment made }; const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/dashboard', name: 'Dashboard', component: Dashboard, meta: { middleware: ['AuthMiddleware', 'PaymentMiddleware'] // Apply named middlewares } }, { path: '/login', name: 'Login', component: Login }, { path: '/payment', name: 'Payment', component: Payment } ]; const router = new VueRouter({ mode: 'history', routes }); // Initialize vue-route-middleware with named middlewares router.beforeEach(VueRouteMiddleware({ AuthMiddleware, PaymentMiddleware })); // Create and mount the Vue app (for a full runnable example) // new Vue({ // router, // template: ` // <div id="app"> // <router-link to="/">Home</router-link> | // <router-link to="/dashboard">Dashboard</router-link> | // <router-link to="/login">Login</router-link> | // <router-link to="/payment">Payment</router-link> // <hr> // <router-view></router-view> // </div> // ` // }).$mount('#app'); // To test, open your browser console and set: // localStorage.setItem('isLoggedIn', 'true'); // localStorage.setItem('hasPaid', 'true'); // Then navigate to /dashboard.