Vuejs - Trying to get the updated store.state data in my router - vue.js

Question

I’m trying to get the store.state.role data in my router to determine which routes file it should use for the routes.
When i console.log(store.state) i see that the store.state.role has the correct data i need. But when i target the parameter like console.log(store.state.role) it shows the default value from my store which isn't the same as what i see when i console.log(store.state).
this is my store file
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state:
{
//User
login_state: false,
refreshUser: false,
role: '',
target: '',
currentProject: '',
},
mutations:
{
//Update user token
updateUserToken(state, payload)
{
localStorage.setItem('token', payload);
state.login_state = true;
},
//Update role
updateRole(state, payload)
{
state.role = payload;
},
//Login state switch
loginStateUpdate(state, payload)
{
state.login_state = payload;
},
//Refresh userdata
userRefresh(state)
{
state.refreshUser = !state.refreshUser
},
updateProject(state, payload)
{
state.currentProject = payload
}
},
getters:
{
},
actions:
{
},
modules:
{
}
})
this is my router file
import Vue from "vue";
import VueRouter from "vue-router";
import Tenant from "./tenant";
import Tenancy from "./tenancy";
import {tenancy} from '../resources/api.config'
import {Http} from '#/util/http'
import store from '../store'
Vue.use(VueRouter);
const host = window.location.host.toLowerCase().split(".")[0];
let routes;
if (host != tenancy.toLowerCase())
{
console.log(store.state.role) //Returns '' while it's 'admin'
routes = Tenant;
store.commit('updateTarget', 'tenant');
}
else
{
console.log(store.state.role) //Returns '' while it's 'admin'
routes = Tenancy;
store.commit('updateTarget', 'tenancy');
}
const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL,
routes
});
export default router;
Why is this happening and how can i get the data i need ?

Answer 1

#neavehni's answer, using Local Storage, may add some unwanted side-effects, such as if multiple people use the the same device. Some better options:
Navigation Guards
Using Navigation Guards, add all routes at once, then implement navigation guards to prevent users from navigating to routes that they don't have permission for. (See documentation on Navigation Guards). You can use router.beforeEach if it is possible to make a unified implementation for all routes, or define the beforeEnter guard on each route if each route has very custom requirements. One option to simplify the navigation guard code is to include some information in the meta object of each route. This object allows you to define and store any data you wish in association with the route, which can be checked in the beforeEach global navigation guard.
Dynamically Load Routes at Login
An alternative is to only load a few shared routes in router.js. Then, after the user logs in, add the appropriate routes using the router's addRoutes method. This method accepts an array of RouteConfig objects, so you could use the same route definitions you currently have. See documentation here.

Answer 2

The only solution i've found is instead of using vuex store you use the localstorage.