CODEWITHSUNDEEP
javascriptexpressvue.jsaxios
Fusseldieb
Fusseldieb

Reputation: 1374

Send headers with Vue-Router

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/component. To better visualize, I made a barebone example of what I'm doing:

const router = new VueRouter({
  routes: [
    ...
    {
      path: "/a_page",
      component: 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 comment 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.

Upvotes: 4

Views: 6578

Answers (3)

Jess
Jess

Reputation: 3146

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.

Upvotes: 1

David Torrey
David Torrey

Reputation: 1342

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.

Upvotes: 0

Benjamin James Kippax
Benjamin James Kippax

Reputation: 653

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.

Upvotes: 1

Related Questions