juanrdlo · March 27, 2024 04:40 · Jul 27, 2019 · Jul 25, 2019 · Jul 25, 2019
diff --git a/index.js b/index.js
@@ -29,12 +29,12 @@ export default function (/* { store, ssrContext } */ { store }) {
    * Run the middleware(s) using the beforeEach hook
    */
   Router.beforeEach((to, from, next) => {
-    if (!to.meta.middleware) return next()
-    let middleware = to.meta.middleware
+    if (!to.meta.middlewares) return next()
+    let middlewares = to.meta.middlewares
     let context = { to, from, next, store }
-    return middleware[0]({
+    return middlewares[0]({
       ...context,
-      next: middlewarePipeline(context, middleware, 1)
+      next: middlewarePipeline(context, middlewares, 1)
     })
   })
 

diff --git a/middleware-pipeline.js b/middleware-pipeline.js
@@ -1,17 +1,17 @@
 // router/middleware-pipeline.js
 
 /**
- * A stack of different middlewares ran in series with each other
+ * A stack of different middlewares ran in series
  * Link: https://blog.logrocket.com/vue-middleware-pipelines/
  */
-function middlewarePipeline (context, middleware, index) {
-  let nextMiddleware = middleware[index]
-  if (!nextMiddleware) return context.next
+function middlewarePipeline (context, middlewares, index) {
+  let middleware = middlewares[index]
+  if (!middleware) return context.next
   return () => {
-    let nextPipeline = middlewarePipeline(
-      context, middleware, index + 1
+    let nextMiddleware = middlewarePipeline(
+      context, middlewares, index + 1
     )
-    nextMiddleware({ ...context, next: nextPipeline })
+    middleware({ ...context, next: nextMiddleware })
   }
 }
 

diff --git a/middlewares.js b/middlewares.js
@@ -3,7 +3,7 @@
 /**
  * Auth middleware example.
  */
-export function auth ({ next, store }) {
+export function auth (/* { to, from, next, store } */ { next, store }) {
   if(!store.getters.auth) {
     return next({ name: 'login' })
   }   

diff --git a/routes.js b/routes.js
@@ -17,7 +17,7 @@ const routes = [
         name: 'dashboard',
         component: Dashboard,
         meta: {
-            middleware: [ auth ]
+            middlewares: [ auth ]
         },
     }
 

diff --git a/auth.js → middlewares.js b/auth.js → middlewares.js
@@ -1,9 +1,9 @@
-// router/middlewares/auth.js
+// router/middlewares.js
 
 /**
  * Auth middleware example.
  */
-export default function auth ({ next, store }) {
+export function auth ({ next, store }) {
   if(!store.getters.auth) {
     return next({ name: 'login' })
   }   

diff --git a/routes.js b/routes.js
@@ -1,6 +1,6 @@
 // router/routes.js
 
-import auth from './middlewares/auth'
+import auth from './middlewares'
 
 const routes = [
     // ...

diff --git a/auth.js b/auth.js
@@ -0,0 +1,11 @@
+// router/middlewares/auth.js
+
+/**
+ * Auth middleware example.
+ */
+export default function auth ({ next, store }) {
+  if(!store.getters.auth) {
+    return next({ name: 'login' })
+  }   
+  return next()
+}
diff --git a/index.js b/index.js
@@ -0,0 +1,42 @@
+// router/index.js
+
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
+import routes from './routes'
+import middlewarePipeline from './middleware-pipeline'
+
+Vue.use(VueRouter)
+
+/*
+ * If not building with SSR mode, you can
+ * directly export the Router instantiation
+ */
+
+export default function (/* { store, ssrContext } */ { store }) {
+  const Router = new VueRouter({
+    scrollBehavior: () => ({ x: 0, y: 0 }),
+    routes,
+
+    // Leave these as is and change from quasar.conf.js instead!
+    // quasar.conf.js -> build -> vueRouterMode
+    // quasar.conf.js -> build -> publicPath
+    mode: process.env.VUE_ROUTER_MODE,
+    base: process.env.VUE_ROUTER_BASE
+  })
+
+  /**
+   * Run the middleware(s) using the beforeEach hook
+   */
+  Router.beforeEach((to, from, next) => {
+    if (!to.meta.middleware) return next()
+    let middleware = to.meta.middleware
+    let context = { to, from, next, store }
+    return middleware[0]({
+      ...context,
+      next: middlewarePipeline(context, middleware, 1)
+    })
+  })
+
+  return Router
+}
diff --git a/middleware-pipeline.js b/middleware-pipeline.js
@@ -0,0 +1,18 @@
+// router/middleware-pipeline.js
+
+/**
+ * A stack of different middlewares ran in series with each other
+ * Link: https://blog.logrocket.com/vue-middleware-pipelines/
+ */
+function middlewarePipeline (context, middleware, index) {
+  let nextMiddleware = middleware[index]
+  if (!nextMiddleware) return context.next
+  return () => {
+    let nextPipeline = middlewarePipeline(
+      context, middleware, index + 1
+    )
+    nextMiddleware({ ...context, next: nextPipeline })
+  }
+}
+
+export default middlewarePipeline
diff --git a/routes.js b/routes.js
@@ -0,0 +1,27 @@
+// router/routes.js
+
+import auth from './middlewares/auth'
+
+const routes = [
+    // ...
+
+    {
+        path: '/login',
+        name: 'login',
+        component: Login
+    },
+
+    // An example of route using auth middleware
+    {
+        path: '/dashboard',
+        name: 'dashboard',
+        component: Dashboard,
+        meta: {
+            middleware: [ auth ]
+        },
+    }
+
+    // ...
+]
+
+export default routes