如何在不使用事件总线的情况下获取另一个组件中某个组件中数据属性的值？

Question

I have a data attribute 'auth', which holds whether the user is logged in or not. If it is empty then the user is not logged in, if it has 'loggedin' in it then the user is logged in.

This is in one component called 'App.vue' and i have another component called 'DashboardComponent.vue'. If the user isn't authenticated, but types in '/dashboard' URL, i want the app to kick the user back to the login screen. How do i get the 'auth' data from the 'App.vue' component into the 'DashboardComponent.vue' and check if the user is authenticated (before the dashboard renders)?

EDIT:

This is how im currently trying to do it

[DashboardComponent]
EventBus.$on('logged-in', status => {
  this.auth = status
})

beforeMount () {
    if (this.auth !== 'loggedin') {
      router.push({name: 'login'})
    }
}

Is this the correct method? If so, why is it not working?

Answer 1

Declare your data into main file where vue initializes like

window.App = new Vue({
  el: '#app',
  router,
  components: { App },
  data: function(){
        return {
          auth:''
        }
   }

})

after that you may change it in main file as

mounted:function(){
  //when logged in then change status
  this.status = 'loggedIn'
}

Now access it in any component using App.status