Laravel-Vue publishing components which should be protected by authentication - laravel

Question

I am relatively new to Vue and started to build an SPA with Authentication and the Laravel Framework in the background. To achieve that I followed this tutorial:
https://codeburst.io/api-authentication-in-laravel-vue-spa-using-jwt-auth-d8251b3632e0
The auth is working perfectly fine. But what bugs my now is that routes/components which are protected with auth are also bundled in my app.js and are fully readable for everyone who is able to use the dev console.
Example
These are my routes:
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
},
},
]
});
So /order and the corresponding component OrderPage ist protected by auth.
OrderPage:
<template>
<div>
Order Page
</div>
</template>
However the component OrderPage is readable in app.js in public directory. I can just search for the content "Order Page" and read it which is in my opinion not the goal of auth.
Is there a way to "isolate" the protected components and only export/bundle them when the auth is passed? Am I missing something?

Answer 1

Bundling based on Auth
You likely aren't bundling the javascript on the fly... You're transpiling and bundling long before the client visits your site, so no you shouldn't bundle when auth is passed. Bundling, transpiling, and minifying can be pretty resource intensive processes.
Isolation for Security
You could isolate code to a specific javascript file, there's no reason why you need to have everything bundled in the same app.js file. Laravel Mix can produce multiple bundles based on your configuration.
However, there's really no point from a security standpoint since client side code should never contain anything sensitive and all authorizations for actions should be performed on the server.
Production Readability
If you're worried about someone reading the client side code, minified javascript is incredibly hard to decipher since it's shrunk down and obfuscated. Production javascript should always be minified without source maps.