How to setup vuex and vue-router to redirect when a store value is not set?

[lobosan]

Steps to reproduce

Hi I'm creating a project based on the feathers-chat-vuex example and making a couple of changes in the router to check if a route has the property "requiresAuth": true in the meta.json file. If it does then check the value of store.state.auth.user provided by feathers-vuex, if this value is not set then redirect to login.

My code is as follows:
router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import store from '../store'

const meta = require('./meta.json')

// Route helper function for lazy loading
function route (path, view) {
  return {
    path: path,
    meta: meta[path],
    component: () => import(`../components/${view}`)
  }
}

Vue.use(Router)

export function createRouter () {
  const router = new Router({
    mode: 'history',
    scrollBehavior: () => ({ y: 0 }),
    routes: [
      route('/login', 'Login')
      route('/private', 'Private'),
      { path: '*', redirect: '/' }
    ]
  })

  router.beforeEach((to, from, next) => {
    if (to.meta.requiresAuth) {
      if (!store.state.auth.user) {
        next('/login')
      } else {
        next()
      }
    } else {
      next()
    }
  })

  return router
}

router/meta.json

{
  "/private": {
    "requiresAuth": true
  }
}

Expected behavior

Get the store.state.auth.user value inside router.beforeEach to redirect even after reloading a protected page.

Actual behavior

Everything works fine except when I'm logged in and if I reload my protected page called /private then it gets redirected to login even though the user is logged in.

So it seems that store.state.auth.user is not available inside router.beforeEach when reloading page

[marshallswain]

This is because you're redirecting before the user is populated. A round trip to the database is required to retrieve the user information. You'll need to implement some logic to check for a valid token before redirecting. These should get you going in the right direction: https://github.com/canjs/can-connect-feathers/blob/master/utils/utils.js

Basically, check for a token and validate it before you redirect.

[lobosan]

Hi Marshall, I fix it by using the code in the mounted function of the App.vue of feathers-chat-vuex example. My code is as follows:

router.beforeEach((to, from, next) => {
    store.dispatch('auth/authenticate').then(response => {
      next()
    }).catch(error => {
      if (!error.message.includes('Could not find stored JWT')) {
        console.log('Authentication error', error)
      }
      (to.meta.requiresAuth) ? next('/inicio-sesion') : next()
    })
  })

Maybe the example could be updated so others can get around this feature easily