Globales Nutzer-Objekt im Frontend

---

Um Nutzerdaten im Frontend abzurufen, wurde in jede Vue-Instanz das Mixin providesUserData.mixin.js implementiert. Dieses muss auch in jede künftige Vue-Instanz integriert werden.

Anwendungsfall

Die Funktion kommt bei Änderung von Nutzerdaten, (z.B. Gravitas) zum Einsatz. Für Komponenten, die die Gravitas eines Nutzers anzeigen, werden aktualisiert, wenn man folgendes globales Event emittet:

EventBus.$emit('refresh-userdata');

Das Mixin

/**
 * Wird als zukünftiges zentrales Rechtemanagement für alle Komponenten dienen
 * Beispiel: Gravitas oder andere Nutzerdaten ändern sich:
 * EventBus.$emit('refresh-userdata');
 */
export let providesUserDataMixin = {
    data: function () {
        return {
            UserData: {}
        }
    },
    methods: {
        /**
         * Refresher für Nutzerdaten
         * @returns {Promise<void>}
         */
        async getUserData () {
            axios.get('/profile/userdata').then(response => {
                this.UserData = response.data;
            })
        },

        /**
         * Initialer Ladevorgang der Nutzerdaten über das dataset-Attribut der App-Instanz
         * (Wird vom Backend über einen ViewComposer bereitgestellt)
         * @returns {Promise<void>}
         */
        async getUserDataInitial () {
            this.UserData = JSON.parse(this.$el.dataset.user || false);
        }
    },
    mounted: async function () {
        await this.getUserDataInitial();
        /**
         * Kann global emitted werden, um die Nutzerdaten zu aktualisieren
         */
        EventBus.$on('refresh-userdata', async () => {
            await this.getUserData();
        });
    }
}