0👍
guess had to hard code a forced exit to this , but not so conventional or dynamic because only would put me on a specific page , no matter where of the other links by the moment i might be at …
simply kept the beforeEnter in my router.js file , and then in the landing page, for the non authenticated users set a watcher on a opposite condition , pushing straight to home page , but the point is , being on other view aside home page , if i recharge , then would throw me to home page again….
I struggled with the beforeEach for a while , but none of possible solutions on the web was successful .
Here what i did:
router.js file
import store from '../store/index'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: Home,
beforeEnter:((to, from, next)=>{
if(store.getters.getUser == null || store.getters.getUser == undefined ){
next ('/welcome',)
}
else next ()
})
},
{
path: '/about',
name: 'about',
component:About,
},
{
path: '/chat',
name: 'ChatRoom',
component:ChatRoom,
beforeEnter:((to, from, next) => {
if(store.getters.getUser == null || store.getters.getUser == undefined ){
next ('/welcome',)
}
else next()
})
},
{
path: '/results/:idItemSelected',
name: 'SearchResults',
component:SearchResults,
props:true,
beforeEnter:((to, from, next) => {
if(store.getters.getUser == null || store.getters.getUser == undefined ){
next ('/welcome',)
}
else next()
})
},
{
path: '/welcome',
name: 'WelcomingPage',
component:WelcomingPage,
},
]
and then on my WelcomingPage view set this:
computed: {
...mapGetters(["getUser"]),
user(){
return this.$store.getters.getUser
}
watch:{
user(value) {
if(value != null||value != undefined){
this.$router.push('/')
}
else{
return this
}
},
This middly works but still isn’t completely right , so please if someone has the same issue and already found a practical solution , better than this , i would appreciate any help.
Thanks in advance
- [Vuejs]-TypeError: "setting getter-only property vuejs axios
- [Vuejs]-How to use v-bind to add "dynamic" class to button