I already searched for a good while on the Internet and even checked all suggested questions here, but I found nothing.

Basically, I'm using vue-router to load views when the user clicks on them (without prefetching, just lazy-loading), using a function that imports the Vue view/ponent. To better visualize, I made a barebone example of what I'm doing:

const router = new VueRouter({
  routes: [
    ...
    {
      path: "/a_page",
      ponent: function() {
        return import("./views/A_Page.vue");
      }
    }
  ]
});

I'm using Express in the backend to protect certain routes, because protecting it in the Frontend is wasted effort, since the user could bypass the 'protection' easily, if he wants to. Also all views have their own splitted .js file (using "webpackChunkName") and Express needs a Bearer Authentication Token header for every API call OR .js file requested. This works great with Axios (responsible for fetching API data) where you can manually define a header, but vue-router hasn't this option, and since it doesn't send the Authorization header, it doesn't authenticate, Express blocks the file with a 403 and vue-router fails to import the file.

Is there any way to send the Authorization header with the import (which is basically just a GET request)?

Thanks in advance.

If someone thinks I'm approaching the problem in a wrong way, feel free to ment and suggest another way.

EDIT: The suggested duplicate question was given too little attention and the only solution given (which is basically split in 2) doesn't work with the current webpack anymore; onload(event) and onerror(event) get undefined.

I already searched for a good while on the Internet and even checked all suggested questions here, but I found nothing.

Basically, I'm using vue-router to load views when the user clicks on them (without prefetching, just lazy-loading), using a function that imports the Vue view/ponent. To better visualize, I made a barebone example of what I'm doing:

const router = new VueRouter({
  routes: [
    ...
    {
      path: "/a_page",
      ponent: function() {
        return import("./views/A_Page.vue");
      }
    }
  ]
});

I'm using Express in the backend to protect certain routes, because protecting it in the Frontend is wasted effort, since the user could bypass the 'protection' easily, if he wants to. Also all views have their own splitted .js file (using "webpackChunkName") and Express needs a Bearer Authentication Token header for every API call OR .js file requested. This works great with Axios (responsible for fetching API data) where you can manually define a header, but vue-router hasn't this option, and since it doesn't send the Authorization header, it doesn't authenticate, Express blocks the file with a 403 and vue-router fails to import the file.

Is there any way to send the Authorization header with the import (which is basically just a GET request)?

Thanks in advance.

If someone thinks I'm approaching the problem in a wrong way, feel free to ment and suggest another way.

EDIT: The suggested duplicate question was given too little attention and the only solution given (which is basically split in 2) doesn't work with the current webpack anymore; onload(event) and onerror(event) get undefined.

• javascript
• express
• vue.js
• axios

• Does your Express view embed the data you want protected, or is it just a ponent that then requests data from the API? If you really want to protect your client-side code, see stackoverflow./q/49731460/2486583 – James Irwin Commented Nov 8, 2019 at 15:41
• @JamesIrwin I'm not sure if I understood you right. Express handles both the API and the files. All API calls are made to "/api/...." and all files are loaded requesting to "/....". The API call returns JSON and the files are mainly .js ones, which hold Vue views which then request the API through Axios and are then populated with actual data. – Fusseldieb Commented Nov 8, 2019 at 15:49
• 2 The Idea I thinks, is why do you want to protect ponent if they contains no data. The Js files can be accessible by everybody. When these Js are loaded, they will call the api, then you recieve an error 401 or 403 if you are not authenticated or if you dont have the good right – Sodala Commented Nov 8, 2019 at 16:03
• 1 @Sodala But the Vue view even if it contains no actual data, the entire structure is loaded and a attacker (or someone a little too curious) could trick the route into loading and then analyse the entire page: What do we have, how do we sort things, what do we take into consideration, etc. This is not something I really want to show. – Fusseldieb Commented Nov 8, 2019 at 16:07
• 1 Possible duplicate of How to add authorization header when runtime import webpack chunks of Vue ponents – tony19 Commented Nov 9, 2019 at 7:13

3 Answers 3

You could use a router guard instead of protecting with basic auth.

I use this method, along with lazy loaded routes. If the auth fails you can redirect the user to a login page.

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
    If (auth) { // get value of cookie etc for a jwt token or similar auth method
        next() // proceed
   }
   else {
        next(false) // cancel navigation
        // or
        next(“/login-url”) // redirect you login url
    }
})

Additionally, you could use an axios method to auth on each route change.

If you want to send up the Authorization header (which doesn't seem to be an easy task, given that no one knows how to go about it...) I think you could override webpack's jsonp function that it uses to load the chunks in splitChunks...

Here's the docs for the webpack function that loads the chunks

You'll override your webpack config with your modified chunk loading function and then tie that into your vue.config.js like so...

// vue.config.js

module.exports = {
    configureWebpack: require('./webpack.config.js')
}

All this being said, I would suggest protecting your frontend assets much earlier than when you need to be loading your split chunks and not requiring the Authorization header to serve your static assets.

Sometimes you can do this at the network layer (load balancer, etc) depending on your use-case. Other times using a server-based approach, like rendering your app w/ Nuxt, will be what you want.

If I'm understanding correctly (feel free to correct me), would you be able to do an auth call with axios prior to the actual routing, or perhaps upon the routing using a mounted call? Especially if there is no valid authentication you can then either redirect to a login page or re-route to an error page.

Feel free to let me know if I'm misunderstanding.