Re-render navigation bar after login on vuejs

Question

Im trying to create a client login with vue, I have the main component and nested are the navigation bar and the component that renders the content On the creation of the navigation component I check if the user is logged to show the buttons for guests and hide the buttons for the protected sections My problem is after I submit the login on my login component I don't know how to trigger the re-rederization of my navigation bar component to show the right buttons

I don't know if I should have a global variable on my main component or should I have to find a way to emit an event from the child to the father and the emit another from the main component to the navigation bar or maybe is more simple but I don't have idea

If you need more information just let me know Thanks in advance

Answer 1

The main problem was how to establish communication between components of the same hierarchy, to solve this I implemented and Event Bus approach described on the Vue.js documentation:

https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication

I just create a new instance of Vue called EventBus

// EventBus.js
import Vue from 'vue'
export default new Vue()

And then I included this globally on my main Vue instance

// main.js
import EventBus from './EventBus'
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

Vue.prototype.$bus = EventBus

/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    template: '<App/>',
    components: { App }
})

With this I can emit events on my components and listen them on other components with the same hierarchy like this:

// Login.Vue
import axios from 'axios'
export default {
     name: 'login',
     data () {
         let data = {
             form: {
                  email: '',
                  password: ''
             }
         }
         return data
     },
    methods: {
        login () {
            axios.post('http://rea.app/login', this.form)
            .then(response => {
                let responseData = response.data.data
                this.$localStorage.set('access_token', responseData.token)
                this.$bus.$emit('logged', 'User logged')
                this.$router.push('/')
            })
            .catch(error => {
                if (error.response) {
                    console.log(error.response.data)
                    console.log(error.response.status)
                    console.log(error.response.headers)
                }
            })
        }
    }
}

And I can listen the triggered event on my other component setting up the listener on the create method like this:

// NavBar.js
export default {
     template: '<Navigation/>',
     name: 'navigation',
     data () {
         return {
             isLogged: this.checkIfIsLogged()
         }
     },
     created () {
         this.$bus.$on('logged', () => {
             this.isLogged = this.checkIfIsLogged()
         })
     }
 }

Hope this can work as reference