Vue.js and router - vuejs2

Question

I need to use the router object inside a custom method but i keep getting an undefined error
I have registered the router in my App.vue import router from './router' and the router works when routing
Now, i have created an auth.js file to manage user status from a jwt token.
/* global localStorage */
import User from '#/models/User'
import * as MutationTypes from './mutation_types'
import router from '#/router'
const state = {
user: User.from(localStorage.token),
layout: 'home-layout'
}
const getters = {
currentUser (state) {
return state.user
},
layout (state) {
return state.layout
}
}
const mutations = {
[MutationTypes.LOGIN] (state) {
state.user = User.from(localStorage.token)
console.log(state.user)
if(!state.user.role){
state.layout = 'home-layout'
} else if (state.user.role==='USER'){
console.log('sono utente')
state.layout = 'home-layout'
} else if (state.user.role==='ADMIN'){
console.log('sono admin')
state.layout = 'admin-layout'
router.replace(route.query.redirect || "/admin");
}
},
[MutationTypes.LOGOUT] (state) {
state.user = null
state.layout = 'home-layout'
},
SET_LAYOUT (state, payload) {
state.layout = payload
}
}
const actions = {
login ({ commit }) {
commit(MutationTypes.LOGIN)
},
logout ({ commit }) {
commit(MutationTypes.LOGOUT)
}
}
export default {
state,
actions,
mutations,
getters,
router
}
this is the router/index.js file
import Vue from 'vue'
import Router from 'vue-router'
import Home from '#/views/Home'
import Contacts from '#/views/Contacts'
import About from '#/views/About'
import Dashboard from '#/views/admin/Dashboard'
import ObjectList from '#/components/ObjectList'
import Register from '#/views/Register'
Vue.use(Router)
export default new Router({
linkExactActiveClass: 'active', // active class for *exact* links.
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/contacts',
name: 'contacts',
component: Contacts
},
{
path: '/about',
name: 'about',
component: About
},
{
path: '/register',
name: 'register',
component: Register
},
{
path: '/admin',
name: 'dashboard',
component: Dashboard
},
...
]
})
so when i need to check the current user status i call the LOGIN action but i keep getting that this.$router is undefined, but it should be globally declared
what is the correct way to do it?

Answer 1

I think this is not what you think it is.
import router from './router' //add correct path
const mutations = {
[MutationTypes.LOGIN] (state) {
state.user = User.from(localStorage.token)
if(!state.user.role){
state.layout = 'home-layout'
} else if (state.user.role==='USER'){
state.layout = 'home-layout'
} else if (state.user.role==='ADMIN'){
state.layout = 'admin-layout'
- this.$router.replace(this.$route.query.redirect || "/admin"); //delete
+ router.replace(router.currentRoute.query.redirect || "/admin"); // add
}
},
[MutationTypes.LOGOUT] (state) {
state.user = null
state.layout = 'home-layout'
},
SET_LAYOUT (state, payload) {
state.layout = payload
}
}