modified: serv_nginx/bbvue/src/views/News.vue

add checkAuth in onMounted
This commit is contained in:
2025-10-16 09:03:58 +05:00
parent 1c34a5578f
commit b3f93cc27d
+58 -24
View File
@@ -32,8 +32,7 @@
<div class="news-controls">
<div class="news-filters">
<button v-for="filter in filters" :key="filter.value"
:class="['filter-btn', { 'active': activeFilter === filter.value }]"
@click="setFilter(filter.value)">
:class="['filter-btn', { 'active': activeFilter === filter.value }]" @click="setFilter(filter.value)">
{{ filter.label }}
</button>
</div>
@@ -165,10 +164,9 @@
<!-- Форма добавления комментария -->
<div v-if="isAuthenticated" class="comment-form">
<textarea v-model="newComment" placeholder="Напишите ваш комментарий..."
class="comment-input" rows="3"></textarea>
<button class="btn btn-primary" @click="addComment"
:disabled="!newComment.trim() || commentLoading">
<textarea v-model="newComment" placeholder="Напишите ваш комментарий..." class="comment-input"
rows="3"></textarea>
<button class="btn btn-primary" @click="addComment" :disabled="!newComment.trim() || commentLoading">
{{ commentLoading ? 'Отправка...' : '💬 Отправить комментарий' }}
</button>
</div>
@@ -190,9 +188,8 @@
<span class="author-name">{{ comment.author.first_name }} {{ comment.author.last_name }}</span>
<span class="comment-date">{{ formatDate(comment.created_at) }}</span>
</div>
<button v-if="isAuthenticated && isCommentAuthor(comment.author_id)"
class="btn-delete-comment" @click="deleteComment(comment.id)"
title="Удалить комментарий">
<button v-if="isAuthenticated && isCommentAuthor(comment.author_id)" class="btn-delete-comment"
@click="deleteComment(comment.id)" title="Удалить комментарий">
🗑
</button>
</div>
@@ -219,22 +216,21 @@
<form @submit.prevent="submitNewsForm" class="news-form">
<div class="form-group">
<label>Заголовок *</label>
<input v-model="newsForm.title" type="text" required
placeholder="Введите заголовок новости" class="form-input">
<input v-model="newsForm.title" type="text" required placeholder="Введите заголовок новости"
class="form-input">
</div>
<div class="form-group">
<label>Краткое описание *</label>
<textarea v-model="newsForm.excerpt" required
placeholder="Краткое описание новости (максимум 500 символов)"
class="form-textarea" rows="3" maxlength="500"></textarea>
placeholder="Краткое описание новости (максимум 500 символов)" class="form-textarea" rows="3"
maxlength="500"></textarea>
<div class="char-count">{{ newsForm.excerpt.length }}/500</div>
</div>
<div class="form-group">
<label>Содержание *</label>
<textarea v-model="newsForm.content" required
placeholder="Полное содержание новости"
<textarea v-model="newsForm.content" required placeholder="Полное содержание новости"
class="form-textarea" rows="6"></textarea>
</div>
@@ -251,8 +247,7 @@
<div class="form-group">
<label>Изображение (URL)</label>
<input v-model="newsForm.image" type="url"
placeholder="https://example.com/image.jpg" class="form-input">
<input v-model="newsForm.image" type="url" placeholder="https://example.com/image.jpg" class="form-input">
<small>Оставьте пустым для изображения по умолчанию</small>
</div>
@@ -430,12 +425,36 @@ export default {
}
},
async checkAuth() {
try {
const token = localStorage.getItem('auth_token')
if (token) {
try {
// Пытаемся получить профиль пользователя для проверки авторизации
const response = await apiClient.get('/user/profile')
this.isAuthenticated = true
this.currentUser = response.data
} catch (error) {
console.error('Токен невалиден:', error)
this.handleAuthError()
}
} else {
this.isAuthenticated = false
this.currentUser = null
}
} catch (error) {
console.error('Ошибка проверки авторизации:', error)
this.handleAuthError()
}
},
async submitNewsForm() {
this.newsLoading = true
try {
if (this.editingNews) {
await apiClient.put(`/news/${this.editingNews.id}`, this.newsForm)
} else {
console.log('News form data:', this.newsForm)
await apiClient.post('/news', this.newsForm)
}
@@ -549,6 +568,7 @@ export default {
if (this.isAuthenticated) {
await this.fetchProfile()
}
this.checkAuth()
},
beforeUnmount() {
document.removeEventListener('keydown', this.handleKeydown)
@@ -573,7 +593,9 @@ export default {
gap: 0.5rem;
}
.btn-edit, .btn-delete, .btn-delete-comment {
.btn-edit,
.btn-delete,
.btn-delete-comment {
background: none;
border: none;
padding: 5px;
@@ -588,7 +610,8 @@ export default {
transform: scale(1.1);
}
.btn-delete:hover, .btn-delete-comment:hover {
.btn-delete:hover,
.btn-delete-comment:hover {
background: #ffebee;
transform: scale(1.1);
}
@@ -602,7 +625,9 @@ export default {
background: #d32f2f;
}
.loading-state, .error-state, .empty-state {
.loading-state,
.error-state,
.empty-state {
text-align: center;
padding: 3rem;
color: #666;
@@ -619,8 +644,13 @@ export default {
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.error-state {
@@ -730,7 +760,9 @@ export default {
color: #333;
}
.form-input, .form-textarea, .form-select {
.form-input,
.form-textarea,
.form-select {
width: 100%;
padding: 0.75rem;
border: 2px solid #e9ecef;
@@ -739,7 +771,9 @@ export default {
font-size: 1rem;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
outline: none;
border-color: #2e8b57;
}