Компоненты публикации Laravel-Vue, которые должны быть защищены аутентификацией

Question

Я относительно новичок в Vue и начал создавать SPA с Аутентификацией и Laravel Framework в фоновом режиме.Чтобы добиться этого, я следовал этому уроку:

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 не защищены аутентификацией.OrderPage:

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

Однако компонент OrderPage доступен для чтения в app.js в общем каталоге.Я могу просто найти содержимое «Страница заказа» и прочитать его, что, на мой взгляд, не является целью аутентификации.

Есть ли способ «изолировать» защищенные компоненты и экспортировать / связывать их только тогда, когдааутентификация пройдена?Я что-то упустил?

Answer 1

Связывание на основе аутентификации Вероятно, вы не связываете javascript на лету ... Вы переносите и связываете задолго до того, как клиент заходит на ваш сайт, поэтому нет необходимости связывать при аутентификациипередается.Пакетирование, перенос и минимизация могут быть довольно ресурсоемкими процессами.

Изоляция для безопасности Вы можете изолировать код в конкретном файле JavaScript, нет причин, по которым вам нужно объединять все втот же файл app.js.Laravel Mix может создавать несколько пакетов на основе вашей конфигурации.

Однако с точки зрения безопасности действительно нет никакого смысла, так как код на стороне клиента не должен никогда содержать что-либо чувствительное, и все авторизации для действий должны быть выполненына сервере.

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