Как изменить параметры, входа и просмотра страницы

Есть файл main.js

function getIndex(list, id) {
    for (var i = 0; i < list.length; i++ ) {
        if (list[i].id === id) {
            return i;
        }
    }

    return -1;
}


var messageApi = Vue.resource('/message{/id}');

Vue.component('message-form', {
    props: ['messages', 'messageAttr'],
    data: function() {
        return {
            text: '',
            id: ''
        }
    },
    watch: {
        messageAttr: function(newVal, oldVal) {
            this.text = newVal.text;
            this.id = newVal.id;
        }
    },
    template:
        '<div>' +
        '<input type="text" placeholder="Write something" v-model="text" />' + // убрать от гостей но что бы отображалось у пользователей которые вошли под гугл аккаунтом
        '<input type="button" value="Save" @click="save" />' + // убрать от гостей но что бы отображалось у пользователей которые вошли под гугл аккаунтом
        '</div>',
    methods: {
        save: function() {
            var message = { text: this.text };

            if (this.id) {
                messageApi.update({id: this.id}, message).then(result =>
                    result.json().then(data => {
                        var index = getIndex(this.messages, data.id);
                        this.messages.splice(index, 1, data);
                        this.text = ''
                        this.id = ''
                    })
                )
            } else {
                messageApi.save({}, message).then(result =>
                    result.json().then(data => {
                        this.messages.push(data);
                        this.text = ''
                    })
                )
            }
        }
    }
});

Vue.component('message-row', {
    props: ['message', 'editMethod', 'messages'],
    template: '<div>' +
        '<i>({{ message.id }})</i> {{ message.text }}' +
        '<span style="position: absolute; right: 0">' +
        '<input type="button" value="Edit" @click="edit" />' +  // убрать от гостей но что бы отображалось у пользователей которые вошли под гугл аккаунтом
        '<input type="button" value="X" @click="del" />' + // убрать от гостей но что бы отображалось у пользователей которые вошли под гугл аккаунтом
        '</span>' +
        '</div>',
    methods: {
        edit: function() {
            this.editMethod(this.message);
        },
        del: function() {
            messageApi.remove({id: this.message.id}).then(result => {
                if (result.ok) {
                    this.messages.splice(this.messages.indexOf(this.message), 1)
                }
            })
        }
    }
});

Vue.component('messages-list', {
    props: ['messages'],
    data: function() {
        return {
            message: null
        }
    },
    template:
        '<div style="position: relative; width: 300px;">' +
        '<message-form :messages="messages" :messageAttr="message" />' +
        '<message-row v-for="message in messages" :key="message.id" :message="message" ' +
        ':editMethod="editMethod" :messages="messages" />' +
        '</div>',
    methods: {
        editMethod: function(message) {
            this.message = message;
        }
    }
});

var app = new Vue({
    el: '#app',
    template:
        '<div>' +
        '<div v-if="!profile">Необходимо авторизоваться через <a href="/login">Google</a></div>' +
        '<div v-else>' +
        '<div>{{profile.name}}&nbsp;<a href="/logout">Выйти</a></div>' +
        '<messages-list :messages="messages" />' + //Добавить возможность невошедшим пользователям видить созданые вошедшыми пользователями сообщения
        '</div>' +
        '</div>',
    data: {
        messages: frontendData.messages,
        profile: frontendData.profile
    },
    created: function() {
//    messageApi.get().then(result =>
//        result.json().then(data =>
//            data.forEach(message => this.messages.push(message))
//        )
//    )
    },
});

Получаеться что пользователь будет видить информацию только когда залогинится. Мне же нужно убрать эту функцию и сделать следующее.

  1. Что бы информаци которую видит пользователь (который гость и не зашел под своим аккаунтом) видил только сообщения от пользователей которые вошли под своим аккаунтом.
  2. но не видел полей для ввода (создания нового сообщения), кнопок редактирования и удаления.

Возможно ли через v-show скрывать эти поля для неавторизированаых и как это реализовать? или написать функцию которая будет разделять авторизированых и нет... тоже не знаю как сделать, подскажите пожалуйста


Ответы (1 шт):

Автор решения: Vitalii Bolkot

Есть идея, сделать глобально роль юзера, типа admin или client который будет приходить с бека после логина по дефолту можно указать как guest и скрывать некоротрые блоки через v-if='!(process.env.VUE_ROLE === guest)' - это скроет блоки даже в доме лучше чем v-show который только ставил display: none

→ Ссылка