Any way to have Vuejs make available the http request headers sent to the server to request the application?

[matthewadams]

Let's say I have a vuejs application that has a view at path http://myhost/#/foobars, and an http client (say, a mobile browser) makes an HTTP GET request that includes an Authorization: Bearer <jwt> header. Let's further say that the JWT they got was obtained earlier from the same backend that the vuejs runs over. Now, if the mobile client requests http://myhost/#/foobars to see that view and includes the Authorization header in the GET request, I'd like vuejs to make that (or all) HTTP request headers available somewhere in the application so that I can grab & verify the JWT and avoid redirecting the caller to a login page, then, upon successful authn & authz, redirecting them back to /#/foobars.

Is there any way to achieve this? AFAICT, I think the only way is to put the JWT in the path as a query parameter, like http://myhost/#/foobars?jwt=AIUHFIAUHF.LKAHFGHAG.AJASOJGIJG, grab that JWT as early as possible during the mount of the application, and either allow or deny navigation to /foobars based on the JWT. This is not the most desirable solution, IMHO, because I don't really want to put the JWT out there so clearly. It's not any less secure than putting it in an HTTP header, it's just that it's so out there, sitting on the address bar and in logs, etc.

I realize that this would require some server-side processing, just hoping that VueJS might have already provided something to make this possible.

[marcosgomesneto]

Vue.js is not designed to provide or manage HTTP requests as you might anticipate. Your question is more aligned with general programming concepts rather than being a specific Vue.js inquiry. To access and manipulate HTTP headers, you can utilize interceptors in external HTTP client libraries or packages, such as axios, which offer a more suitable solution for handling HTTP requests in a Vue.js application.

Could you clarify whether you are using Vue.js as a Single Page Application (SPA) or Nuxt with Server-Side Rendering (SSR)?

It is strongly advised against using the JWT token as a query parameter in the URL for a GET request. This practice is not recommended due to security concerns.

If your goal is to verify the validity and authentication status of the JWT token, this verification process should be exclusively handled by the backend. The frontend should receive a response from the backend indicating whether the JWT is valid and whether the user is authenticated. Based on this information, the frontend can decide whether to redirect to the login page or proceed. In your scenario, you may use a query parameter in the URL to store the redirect page after login.

I hope this information proves helpful. Feel free to provide more details about your project and your backend for further assistance.

If this response has been helpful to you, please consider marking it as "answered."

[matthewadams]

We are using Vue.js as an SPA. We are well aware of the risks of using the JWT as a query parameter in a GET request. Our backend, obviously, is the thing that produces & verifies JWTs that come in from requests from the front end.

I think the upshot of this is that no SPA that's intended to be delivered as a static bundle from a web server that does no server-side processing can possibly support the requestor sending a JWT on the initial request for the application. The only two means I can reasonably think of would be either a request parameter (as we've establihsed, not great) or by putting the JWT in a cookie on the browser that can be used by the SPA to authorize the user's access to any protected paths in the SPA.

Agree?

[marcosgomesneto]

Exactly, the HTTP service serving the SPA doesn't support sending JWT, primarily because it's only serving the static files of the application, and all execution occurs in the browser. The recommended approach is to store the JWT token securely, typically in Http-Only cookies. Subsequently, you can resend it to your backend API on each route/page change. If you aim to avoid two separate requests or leverage the same GET request to verify the JWT, this is only feasible with SSR using Nuxt.