Question

我对Vue比较陌生，因此开始在后台构建带有Authentication和Laravel框架的SPA。为此，我遵循了本教程：

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

身份验证工作正常。但是我现在遇到的问题是，受auth保护的路由/组件也捆绑在我的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中是可读的。我只能搜索“订购页面”内容并阅读，我认为这不是auth的目标。

有没有一种方法可以“隔离”受保护的组件，并且仅在通过身份验证时才导出/捆绑它们？我想念什么吗？

Answer 1

基于身份验证的绑定 您可能不会立即捆绑JavaScript。您在客户端访问您的站点之前就已经进行了捆绑和捆绑，因此，不可以在通过身份验证时不捆绑。捆绑，转堆和最小化可能是相当耗费资源的过程。

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

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

生产可读性 如果您担心有人在阅读客户端代码，那么精简的javascript会变得难以理解，因为它会缩小并变得模糊。在没有源映射的情况下，应始终缩小生产javascript。

Laravel-Vue发布组件，应通过身份验证进行保护

1 个答案: