在Vue中对非身份验证用户隐藏组件的正确方法

时间:2018-11-08 14:02:51

标签: javascript laravel vue.js

我一直在考虑将我的应用完全更改为vue front,但是有些事情困扰着我,例如:

我现在在laravel刀片中使用(帖子页面):

@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中进行检查,但是如果客户端有人将全局对象ID更改为post-user-id,他将获得要编辑的组件,尽管由于用户验证它不会编辑或影响后端,但它将显示表格...

有办法避免这种情况吗?

3 个答案:

答案 0 :(得分:0)

您可以使用vue的v-if。这将根据您的参数有条件地呈现html元素。

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

v-if是“真实的”条件渲染,因为它可以确保条件块内的事件侦听器和子组件在触发期间正确销毁并重新创建。

答案 1 :(得分:0)

不是,不是,一个足够熟练的用户可以访问javascript控制台,可以运行他们想要的任何代码,并可以在前端中随意执行。

如果您要执行的操作如将所有人的私人数据发送给所有用户,然后使用Javascript有选择地隐藏它,那将是一个非常糟糕的主意。但实际上是这样...如果后端可以捕获用户试图编辑不属于他们的帖子的案例,那么您会没事的。无论如何,您所有的身份验证和授权逻辑都应该存在,而Vue通常会负责渲染

答案 2 :(得分:-1)

您从不依靠前台来验证数据。曾经。

您应该研究基于API的开发,

在您的情况下,无需将当前用户ID传递到后端。始终在您的Laravel应用中检查Auth :: user()。 (在后端)。恶意用户不能伪造经过身份验证的用户。