Importar el Store en el router.js de un proyecto Quasar

Hola amigos lectores de CodigoJS, hoy les quiero compartir un tip muy sencillo sobre Vue Router y Vuex que quizás te ayude a no perder el tiempo, sobre todo si recién comienzas en Quasar Framework.

Cuando trabajamos con un proyecto donde necesitamos proteger rutas, lo más común es utilizar una combinación de Vuex con Vue Router para comprobar, por ejemplo si el usuario está autenticado y permitirle acceder o no a la ruta.

Tabla de contenidos

Al iniciar un nuevo proyecto de Quasar, el Store viene predefinido como se ve a continuación:

import Vue from 'vue'
import Vuex from 'vuex'

// import example from './module-example'

Vue.use(Vuex)

/*
 * If not building with SSR mode, you can
 * directly export the Store instantiation;
 *
 * The function below can be async too; either use
 * async/await or return a Promise which resolves
 * with the Store instance.
 */

export default function (/* { ssrContext } */) {
  const Store = new Vuex.Store({
    modules: {
      // example
    },

    // enable strict mode (adds overhead!)
    // for dev mode only
    strict: process.env.DEBUGGING
  })

  return Store
}

Ahora vamos a crear un módulo en el Store, el cual vamos a usar en el src/router/routes.js del proyecto.

$ quasar new s main

Donde main corresponde al nombre del nuevo módulo creado.

Incluir un módulo en el Store

Para incluir el módulo en el Store, editamos el archivo src/store/index.js y hacemos los siguientes cambios:

import Vue from 'vue'
import Vuex from 'vuex'

import main from './main' // 1- Importamos el módulo.

Vue.use(Vuex)

export default function (/* { ssrContext } */) {
  const Store = new Vuex.Store({
    modules: {
      main // 2- Registramos el módulo.
    },

    strict: process.env.DEBUGGING
  })

  return Store
}

Exportar la instancia del Store

Ahora necesitamos hacer otro cambio en el archivo src/store/index.js para que nos permita exportar la instancia del Store en el archivo routes.js

import Vue from 'vue'
import Vuex from 'vuex'

import main from './main'

Vue.use(Vuex)

// 1- Movemos la instancia del Store fuera de la función
const Store = new Vuex.Store({
  modules: {
    main
  },
  strict: process.env.DEBUGGING
})

export default function (/* { ssrContext } */) {
  return Store
}

// Exportamos la instancia del Store
export { Store }

De esta forma tenemos una instancia del Store lista para importar en el router del proyecto.

Importar la instancia del Store en el Router

Editarmos el archivo src/router/routes.js e importamos la instancia del Store del la siguiente forma.

// 1- Importamos la instancia del Store
import { Store } from '../store/index.js'

const routes = [
  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      {
        path: '',
        component: () => import('pages/Index.vue'),
        beforeEnter: (to, from, next) => {
          // Ahora podemos hacer uso del Store en el archivo routes.js
          if (!Store.getters['auth/isAuthenticated']) {
            next('login')
          } else {
            next()
          }
        }
      }
    ]
  },

  {
    path: '*',
    component: () => import('pages/Error404.vue')
  }
]

export default routes

De esta sencilla forma podemos importar el Store en el archivo routes.js y tener disponible todas los objetos del Store para hacer las comprobaciones que sean necesarias.

Espero que sea de su utilidad y como siempre digo. Si tienes alguna duda dejanos saber en los comentarios.

Hasta la próxima.