Redirect after logged in - vue.js

Question

guys. Can someone help me to fix this problem with redirect?
I have this router file:
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!store.state.auth.is_authenticated) {
next({
path: '/login',
query: {
redirect: to.fullPath
}
})
} else {
next()
}
} else if (to.matched.some(record => record.meta.requiresGuest)) {
if (store.state.auth.is_authenticated) {
next({
path: '/',
query: {
redirect: to.fullPath
}
})
} else {
next()
}
} else {
next()
}
})
Current auth status is stored in vuex state. When I`m logging in status is changing but nothing is happening with page, only Header component updates.
<script>
import { mapGetters, mapActions } from "vuex";
export default {
name: "Login",
data: () => {
return {
email: "",
password: ""
};
},
computed: mapGetters(["currentUser"]),
methods: {
...mapActions(["loginUser"]),
login: function(event) {
event.preventDefault();
this.loginUser({ email: this.email, password: this.password });
}
},
updated() {
if (this.currentUser.is_authenticated) {
this.$router.go({ path: this.$router.path });
}
}
};
</script>

Answer 1

Please modify your code like this and check
helper.js
export function initialize(store, router)
{ router.beforeEach((to,from,next)=>{
const requiresAuth= to.matched.some(record=>record.meta.requiresAuth)
const currentUser = store.state.auth.user;
if(requiresAuth && !currentUser){ next('/login');}
else if(to.path=='/login' && currentUser){ next('/')}
//if user already authenticated and user tries to open login page
//redirect to / path , it can be modified as per config
else { next()}
})
}
Add this in your main.js
import {initialize} from './helper';
initialize(store, router);
In you login page updated part not required as router.beforeEach code in helper.js will be able to take care of that.
methods: {
...mapActions(["loginUser"]),
login: function(event) {
event.preventDefault();
this.loginUser({ email: this.email, password: this.password })
.then(()=>{ this.$router.replace({name:'dashboard'})
//forward to this path after login
}).catch(()=>{console.log('login fail') });
}
},

Answer 2

If store.state.auth.is_authenticated is true means that you logged in you must do after that flag go true something like this this.$router.go(); if you make this with no argument thats means that you will go in exact same page that you are (login page) but then it will triggered by your guards and it will redirect you to panel page or so