应该通过身份验证保护的 Laravel-Vue 发布组件答案

【问题标题】：Laravel-Vue publishing components which should be protected by authentication应该通过身份验证保护的 Laravel-Vue 发布组件
【发布时间】：2018-11-29 13:18:20
【问题描述】：

我对 Vue 比较陌生，并开始在后台使用身份验证和 Laravel 框架构建一个 SPA。为了实现这一点，我遵循了本教程：

https://codeburst.io/api-authentication-in-laravel-vue-spa-using-jwt-auth-d8251b3632e0

身份验证工作正常。但是我现在的错误是，受身份验证保护的路由/组件也捆绑在我的app.js 中，并且对于能够使用开发控制台的每个人来说都是完全可读的。

例子

这些是我的路线：

export default new VueRouter({
routes: [
    {
        path: '/',
        redirect: '/login',
    },
    {
        path: '/login',
        name: 'login',
        component: AuthLogin,
        meta: {
            auth: false
        },
    },
    {
        path: '/order',
        name: 'order',
        component: OrderPage,
        meta: {
            auth: true
        },
    },
  ]
});

所以/order 和相应的组件OrderPage 是受auth 保护的。 OrderPage:

<template>
  <div>
    Order Page
  </div>
</template>

但是组件OrderPage 在公共目录的app.js 中是可读的。我可以搜索内容“订单页面”并阅读它，我认为这不是身份验证的目标。

有没有办法“隔离”受保护的组件并仅在通过身份验证时导出/捆绑它们？我错过了什么吗？

【问题讨论】：

您可能没有即时捆绑 javascript...您在客户端访问您的网站之前很久就已经在进行编译和捆绑，因此不应该在通过身份验证时捆绑。您可以将代码隔离到特定的 javascript 文件，没有理由需要将所有内容捆绑在同一个 app.js 文件中。但是，从安全的角度来看，这确实没有意义。客户端代码不应该包含任何敏感的东西，并且缩小的代码应该非常难以破译。所有的授权都应该在服务器上进行。
在生产中，你的 JS 会被缩小，这将使它几乎不可读。那里不应该有任何秘密 - 没有 API 密钥等 - 但它会受到很好的保护，防止随意的“我想知道那是做什么的”。

标签： laravel authentication vue.js routes vuejs2

【解决方案1】：

基于身份验证的捆绑 您可能不会即时捆绑 javascript...您在客户端访问您的网站之前很久就在进行编译和捆绑，因此不应该在通过身份验证时捆绑。捆绑、转译和缩小可能是相当耗费资源的过程。

安全隔离 您可以将代码隔离到特定的 javascript 文件，没有理由需要将所有内容捆绑在同一个 app.js 文件中。 Laravel Mix 可以根据你的配置生成多个包。

但是，从安全的角度来看，这确实没有意义，因为客户端代码应该从不包含任何敏感内容，并且所有操作授权都应该在服务器上执行。

生产可读性 如果您担心有人阅读客户端代码，那么缩小的 javascript 非常难以破译，因为它被缩小和混淆了。生产 javascript 应始终在没有源映射的情况下进行缩小。

【讨论】：