Comment configurer vuex et vue-router pour rediriger lorsqu'une valeur de magasin n'est pas définie?

Question

Je travaille avec les dernières versions de vue-router, vuex et plumes-vuex et j'ai un problème avec mon routeur.

Ce que je fais est de vérifier si une route a la propriété "requiresAuth": true dans le fichier meta.json. Si c'est le cas, vérifiez la valeur de store.state.auth.user fournie par feathers-vuex, si cette valeur n'est pas définie, redirigez-la pour vous connecter.

Cela fonctionne bien sauf quand je suis connecté et si je recharge ma page protégée appelée /private alors il est redirigé vers connecter il semble donc que la valeur de store.state.auth.user n'est pas prêt à l'intérieur router.beforeEach.

Alors, comment puis-je configurer mon routeur afin d'obtenir la valeur du magasin au bon moment?

Mes fichiers sont les suivants:

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 
} 

meta.json

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

Answer 1

je résolu le problème en retournant une promesse d'une action vuex puis exécutez les validations

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() 
    }) 
})