link2466 link2467 link2468 link2469 link2470 link2471 link2472 link2473 link2474 link2475 link2476 link2477 link2478 link2479 link2480 link2481 link2482 link2483 link2484 link2485 link2486 link2487 link2488 link2489 link2490 link2491 link2492 link2493 link2494 link2495 link2496 link2497 link2498 link2499 link2500 link2501 link2502 link2503 link2504 link2505 link2506 link2507 link2508 link2509 link2510 link2511 link2512 link2513 link2514 link2515 link2516 link2517 link2518 link2519 link2520 link2521 link2522 link2523 link2524 link2525 link2526 link2527 link2528 link2529 link2530 link2531 link2532 link2533 link2534 link2535 link2536 link2537 link2538 link2539 link2540 link2541 link2542 link2543 link2544 link2545 link2546 link2547 link2548 link2549 link2550 link2551 link2552 link2553 link2554 link2555 link2556 link2557 link2558 link2559 link2560 link2561 link2562 link2563 link2564 link2565 link2566 link2567 link2568 link2569 link2570 link2571 link2572 link2573 link2574 link2575 link2576 link2577 link2578 link2579 link2580 link2581 link2582 link2583 link2584 link2585 link2586 link2587 link2588 link2589 link2590 link2591 link2592 link2593 link2594 link2595 link2596 link2597 link2598 link2599 link2600 link2601 link2602

[Vue.js] Accessing Vuex state when defining Vue-Router routes

there is the following Vuex store (main.js):

import vue.js 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’)

I also have the following routes defined for Vue-Router (routes.js):

import vue.js 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 }
]

I’m trying to make it so that if the Vuex store’s user object has authenticated property false, have the router redirect the user to the Login page.

there is this:

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

The problem is I don’t know how to access the Vuex store’s user object from inside the beforeEach function.

I know that I can have the router guard logic inside components using BeforeRouteEnter, but that would clutter up each component. to define it centrally at the router level instead.

Solution :

As suggested here, what you can do is to export the store from the file it is in and import it in the routes.js. It will be something like following:

You have one 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

Now in routes.js, you can have:

import vue.js 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()
}
})

In main.js also you can import store:

import vue.js 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’)

Solution 2:

I ended up moving the store out of main.js and into store/index.js, and importing it into the router.js file:

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

Solution 3:

Managing the location state separate from the rest of the application state can make things like this harder than they maybe need to be. After dealing with similar problems in both Redux and Vuex, I started managing my location state inside my Vuex store, using a router module. You might want to think about using that approach.

In the specific case, you could watch for when the location changes within the Vuex store itself, and dispatch the appropriate “redirect” action, like this:

dispatch(“router/push”, {path: “/login”})

It’s easier than you might think to manage the location state as a Vuex module. You can use mine as a starting point if you want to try it out:

https://github.com/geekytime/vuex-router

Solution 4:

This is how i would to it.

In App.vue, I will keep a watcher on cookie that stores authentication details. ( Obviously I would store a token containing authentication details as cookie after authentication )

Now whenever this cookie becomes empty, I will route the user to /login page. Logging out deletes the cookie. Now if user hit back after logging out, now since the cookie doesnot exist, ( which requires user to be logged in ), user will be routed to login page.