在 vue 中向非身份验证用户隐藏组件的正确方法答案

【问题标题】：Proper way to hide components from not auth users in vue在 vue 中向非身份验证用户隐藏组件的正确方法
【发布时间】：2018-11-08 14:02:50
【问题描述】：

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

我现在在 laravel Blade 中使用（帖子页面）：

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

现在，如果我想将其完全转换为 vue，我需要：

-在我使用 vue 的 master.blade.php 中我需要通过：

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

然后在 vue 中检查它，但是如果客户端有人将全局对象 id 更改为 post-user-id 怎么办，他将获得用于编辑的组件，尽管由于用户验证它不会编辑或影响后端, 但它会显示表单...

有没有办法避免这种情况？

【问题讨论】：

标签： javascript laravel vue.js

【解决方案1】：

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

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

v-if 是“真正的”条件渲染，因为它确保条件块内的事件侦听器和子组件在切换期间被正确销毁和重新创建。

【讨论】：

你不明白，我知道但如果有人通过控制台将用户 ID 更改为 postid 怎么办？
我认为只有在开发模式下才能通过控制台更改 v-model 值。
我没有尝试生产模式，所以我无法判断这是不是真的，但同样的方式是客户端，必须有一种方法可以改变，我想避免它
如果页面使用 Vue.js 的生产/缩小版本，默认情况下禁用 devtools 检查，因此 Vue 窗格不会显示。你可以通过运行npm run production 来尝试。我认为没有办法进行客户端验证，因为 vuejs 是一个 javascript 框架。如果您仍然担心，请添加令牌以增加安全性，这样，即使用户操纵了数据，他也应该知道您返回的令牌。
好吧，我并没有考虑开发工具，而是直接从 fonsole 考虑，因为您可以通过 vue 访问 vue。即使在生产模式下，我也在一些 vue 制作的网站上进行了测试。但似乎我可以像我们所说的那样做，或者说当我获取帖子以检查后端是用户所有者时，是否将该组件作为返回的值包含在内，如果不只是不返回它.然后将组件作为值输出，但需要导入相同的组件，这使得它以相同的方式......

【解决方案2】：

不是真的，不，一个足够熟练且可以访问 javascript 控制台的用户可以运行他们想要的任何代码，并在前端随心所欲地做。

如果您正在做一些事情，例如将每个人的私人数据发送给所有用户并使用 Javascript 选择性地隐藏它，那将是一个非常糟糕的主意。但事实上......如果后端能够捕捉到用户试图实际编辑不属于他们的帖子的情况，那么你会没事的。无论如何，您的所有身份验证和授权逻辑都应该存在，而 Vue 主要负责渲染

【讨论】：

【解决方案3】：

您永远不会依赖前端来验证数据。永远。

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

在您的情况下，不需要将当前用户 ID 传递给后端。总是在你的 Laravel 应用中检查 Auth::user()。（在后端）。恶意用户无法伪造经过身份验证的用户。

【讨论】：