vue.js - usar - Acceder al estado de Vuex al definir las rutas de Vue-Router

vue router set

Question

Tengo la siguiente tienda Vuex (main.js):

import Vue from ''vue''
import Vuex from ''vuex''
Vue.use(Vuex)
//init store
const store = new Vuex.Store({
state: {
globalError: '''',
user: {
authenticated: false
}
},
mutations: {
setGlobalError (state, error) {
state.globalError = error
}
}
})
//init app
const app = new Vue({
router: Router,
store,
template: ''<app></app>'',
components: { App }
}).$mount(''#app'')

También tengo las siguientes rutas definidas para Vue-Router (routes.js):

import Vue from ''vue''
import VueRouter from ''vue-router''
Vue.use(VueRouter)
//define routes
const routes = [
{ path: ''/home'', name: ''Home'', component: Home },
{ path: ''/login'', name: ''Login'', component: Login },
{ path: ''/secret'', name: ''Secret'', component: SecretPage, meta: { requiresLogin: true }
]

Estoy tratando de hacerlo de modo que si el objeto de user la tienda Vuex tiene la propiedad authenticated falsa, haga que el enrutador redirija al usuario a la página de inicio de sesión.

Tengo esto:

Router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresLogin) && ???) {
// set Vuex state''s globalError, then redirect
next("/Login")
} else {
next()
}
})

El problema es que no sé cómo acceder al objeto de user la tienda Vuex desde el interior de la función beforeEach.

Sé que puedo tener la lógica de protección del enrutador dentro de los componentes usando BeforeRouteEnter , pero eso BeforeRouteEnter cada componente. Quiero definirlo centralmente en el nivel del enrutador.

Answer 1

Como se sugiere aquí , lo que puede hacer es exportar su tienda desde el archivo en el que está e importarla en routes.js . Será algo así como lo siguiente:

Usted tiene un store.js :

import Vuex from ''vuex''
//init store
const store = new Vuex.Store({
state: {
globalError: '''',
user: {
authenticated: false
}
},
mutations: {
setGlobalError (state, error) {
state.globalError = error
}
}
})
export default store

Ahora en routes.js , puedes tener:

import Vue from ''vue''
import VueRouter from ''vue-router''
import store from ./store.js
Vue.use(VueRouter)
//define routes
const routes = [
{ path: ''/home'', name: ''Home'', component: Home },
{ path: ''/login'', name: ''Login'', component: Login },
{ path: ''/secret'', name: ''Secret'', component: SecretPage, meta: { requiresLogin: true }
]
Router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresLogin) && ???) {
// You can use store variable here to access globalError or commit mutation
next("/Login")
} else {
next()
}
})

En main.js también puedes importar la store :

import Vue from ''vue''
import Vuex from ''vuex''
Vue.use(Vuex)
import store from ''./store.js''
//init app
const app = new Vue({
router: Router,
store,
template: ''<app></app>'',
components: { App }
}).$mount(''#app'')

Answer 2

Terminé moviendo la tienda de main.js a store / index.js, e importándola al archivo router.js:

import store from ''./store''
//routes
const routes = [
{ path: ''/home'', name: ''Home'', component: Home },
{ path: ''/login'', name: ''Login'', component: Login },
{ path: ''/secret'', name: ''Secret'', component: SecretPage, meta: { requiresLogin: true }
]
//guard clause
Router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresLogin) && store.state.user.authenticated == false) {
store.commit("setGlobalError", "You need to log in before you can perform this action.")
next("/Login")
} else {
next()
}
})