Store is no longer accessible in router.



  • I started a new project in the latest quasar bits.
    Unfortunately, as I used to do in previous versions, I can no longer access the vuex store in the router as follows:

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Store from '../store/index.js'
    import routes from './routes'
    
    Vue.use(VueRouter)
    
    /*
     * If not building with SSR mode, you can
     * directly export the Router instantiation
     */
    
    export default function (/* { store, ssrContext } */) {
      const Router = new VueRouter({
        scrollBehavior: () => ({ y: 0 }),
        routes,
    
        // Leave these as is and change from quasar.conf.js instead!
        // quasar.conf.js -> build -> vueRouterMode
        mode: process.env.VUE_ROUTER_MODE,
        base: process.env.VUE_ROUTER_BASE
      })
    
      Router.beforeEach((to, from, next) => {
        console.log('calling router beforeach')
        if (!Store.getters['authentication/isAuthenticated']) {
          console.log('router beforeach: not authenticated')
          Store.dispatch('authentication/initialize')
          Store.watch(
            state => {
              return Store.getters['authentication/isAuthenticated']
            },
            value => {
              if (value === true) {
                console.log('router beforeEach: authenticated')
                next()
              }
            }
          )
        } else next()
      })
    
      return Router
    }
    
    

    Any idea?
    Thanks a million.
    paul.



  • Seems similar to mine which is working (except for the export default Router at the bottom). I’ll post it.

    Quasar CLI........ v0.17.19
    Quasar Framework.. v0.17.16
    
    import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    import routes from './routes'
    import store from '../store'
    
    import JWT from 'jwt-client'
    
    Vue.use(VueRouter)
    
    const Router = new VueRouter({
      /*
       * NOTE! Change Vue Router mode from quasar.conf.js -> build -> vueRouterMode
       *
       * If you decide to go with "history" mode, please also set "build.publicPath"
       * to something other than an empty string.
       * Example: '/' instead of ''
       */
    
      // Leave as is and change from quasar.conf.js instead!
      mode: process.env.VUE_ROUTER_MODE,
      base: process.env.VUE_ROUTER_BASE,
      scrollBehavior: () => ({ y: 0 }),
      routes
    })
    
    Router.beforeEach((to, from, next) => {
      let allowedToEnter = true
      to.matched.some((record) => {
        // check if there is meta data
        let isLoggedIn = store.getters['auth/isLoggedIn']
        if (!isLoggedIn && record.name === 'home') {
          next({
            path: '/sign-in',
            replace: true
          })
          return
        }
    
        if ('meta' in record) {
          // ------------------------------------------------------------
          // check if user needs to be logged in to access this page
          if ('requiresAuth' in record.meta) {
            if (record.meta.requiresAuth) {
              // console.log('Page requires auth:', to, from)
              // this route requires auth, check if user is logged in
              // if not, redirect to login page.
              if (!isLoggedIn) {
                // User is not logged in, redirect to signin page
                allowedToEnter = false
                next({
                  path: '/sign-in',
                  replace: true,
                  // redirect back to original path when done signing in
                  query: { redirect: to.fullPath }
                })
              }
            }
          }
          // ------------------------------------------------------------
          // check if user has correct permissions to access this page
          if (allowedToEnter && 'permissions' in record.meta) {
            let canProceed = false
            let permissions = record.meta.permissions
            // get currently logged in user permissions
            let token = store.getters['auth/token']
            // decipher the token
            let session = JWT.read(token)
            // check if they are not an admin (administrator)
            if (session.claim.permissions.administrator) {
              canProceed = true
            }
            else {
              for (let index = 0; index < permissions.length; ++index) {
                let permission = permissions[index]
                // console.log('Permission needed:', permission)
                if (permission === 'administrator') {
                  if (session.claim.permissions.administrator) {
                    canProceed = true
                  }
                }
                else if (permission === 'liveview') {
                  if (session.claim.permissions.liveview) {
                    canProceed = true
                  }
                }
                else if (permission === 'archive') {
                  if (session.claim.permissions.archive) {
                    canProceed = true
                  }
                }
                else if (permission === 'alarmsArchiveEvents') {
                  if (session.claim.permissions.alarmsArchiveEvents) {
                    canProceed = true
                  }
                }
                else if (permission === 'remoteAccess') {
                  if (session.claim.permissions.remoteAccess) {
                    canProceed = true
                  }
                }
                else if (permission === 'settings') {
                  if (session.claim.permissions.settings) {
                    canProceed = true
                  }
                }
                else {
                  console.error('Unknown permission in Router.beforeEach:', permission)
                }
              }
            }
    
            if (!canProceed) {
              allowedToEnter = false
              // redirect to not-authorized page
              next({
                path: '/not-authorized',
                replace: true
              })
            }
          }
        }
      })
    
      if (allowedToEnter) {
        // go to the requested page
        next()
      }
    })
    
    export default Router
    


  • @Hawkeye64 Thanks a lot for your support.

    I created via the cli a brand new project which illustrates the problem in the most simple way.

    https://github.com/paulvanbladel/quasar-demo

    Basically, it happens here:

      Router.beforeEach((to, from, next) => {
        console.log('before each')
        console.log(store.state.example.test)
        next()
      })


  • solved.
    When implementing the beforeEach in a plugin, it works 🙂

    export default ({ router, store, Vue }) => {
      router.beforeEach((to, from, next) => {
        console.log('before each')
        debugger
        console.log(store.state.example.test)
        next()
      })
    }
    


  • you could’ve just un-commented the line.
    export default function (/* { store, ssrContext } */) {
    to
    export default function ({ store }) {
    also comment the line
    import store from '../store'
    since like doing it with quasar plugins, the store is also accessible in router/index.js.