Правильный способ скрыть компоненты от неавторизованных пользователей в vue

Question

Я пытался полностью изменить свое приложение на vue front, но есть некоторые вещи, которые меня беспокоят, например:

Теперь я использую лезвие ларавеллы (страница сообщений):

@foreach($posts as $post)
<post data="{!! json_encode($post) !!}">
    @if(auth()->user()->id === $post->user->id)
        <edit-post></edit-post>
    @endif
</post>
@endforeach

Теперь, если я хочу полностью преобразовать это в vue, мне нужно:

- в master.blade.php, где я использую vue, мне нужно будет передать:

window.userData = {id: '{{auth()->user()->id}}'};

и затем проверить его внутри vue, но что, если на стороне клиента кто-то изменит этот глобальный идентификатор объекта на post-user-id, он получит компонент для редактирования, хотя он не будет редактировать или влиять на серверную часть из-за проверки пользователя , но он покажет форму ...

Есть ли способ избежать этого?

Answer 1

Не совсем, нет, достаточно опытный пользователь, имеющий доступ к консоли javascript, может запускать любой код по своему усмотрению и делать все, что ему угодно, во внешнем интерфейсе.

Если вы делали что-то вроде отправки личных данных всем пользователям и выборочно скрывали их с помощью Javascript, это было бы очень плохой идеей. Но как бы то ни было ... если бэкэнд будет отлавливать случаи, когда пользователи пытаются на самом деле редактировать пост, который не принадлежит им, тогда у вас все будет хорошо. Вся ваша логика аутентификации и авторизации должна быть в любом случае, и Vue по большей части позаботится о рендеринге

Answer 2

вы можете использовать vue's v-if. это условно отобразит HTML-элементы на основе вашего параметра.

<post data="{!! json_encode($post) !!}">
    <template v-if="userId === postUserId">
       <edit-post></edit-post>
    </template>
</post>

v-if - это «реальный» условный рендеринг, поскольку он гарантирует, что слушатели событий и дочерние компоненты внутри условного блока будут должным образом уничтожены и воссозданы при переключениях.