Как изменить параметры, входа и просмотра страницы
Есть файл 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}} <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))
// )
// )
},
});
Получаеться что пользователь будет видить информацию только когда залогинится. Мне же нужно убрать эту функцию и сделать следующее.
- Что бы информаци которую видит пользователь (который гость и не зашел под своим аккаунтом) видил только сообщения от пользователей которые вошли под своим аккаунтом.
- но не видел полей для ввода (создания нового сообщения), кнопок редактирования и удаления.
Возможно ли через v-show скрывать эти поля для неавторизированаых и как это реализовать? или написать функцию которая будет разделять авторизированых и нет... тоже не знаю как сделать, подскажите пожалуйста
Ответы (1 шт):
Автор решения: Vitalii Bolkot
→ Ссылка
Есть идея, сделать глобально роль юзера, типа admin или client который будет приходить с бека после логина по дефолту можно указать как guest и скрывать некоротрые блоки через v-if='!(process.env.VUE_ROLE === guest)' - это скроет блоки даже в доме лучше чем v-show который только ставил display: none