How do i securly save content in an vue SPA app

Question

Lets assume i have some secret content i will hide in my Vue app, the following string:

This is really secret

This content i put in my LoggedInHome.vue Component:

The Component is only available when the User logged in. Then, i test it by

npm run preview

Now i check the source code of the Vue app via browser, the generated minified js, where the whole SPA lives in ( in my case: view-source:http://localhost:5050/assets/index.6d93f8ef.js )

In the index.6d93f8ef.js file, i can see the secure string. This is not what I'm expecting.

I want to hide this so nobody except Logged in Users should see this content in the LoggedInHome Component. How do i solve this?

Is this by design ( the whole SPA + content lives in the Browser ) or do i miss something?

Edit: I guess this is the answer : How do I store my private api key on Vue.js app?

Answer 1

Like the other comments said, you should not put secrets client-side. You could grab it with an api call which only allows admins to access the secret.