Understand the workflow for Vuejs frontend application

[igoooor]

I have my frontend application running in Vuejs with kubernetes and traefik 2.
I managed to make the traefik-forward-auth works fine, meaning I see the Google login screen and I am then redirected to my application in Overlay Mode.
However once I'm back on my frontend application (vuejs) how do I retrieve logged in user?
I did add the authResponseHeaders = ["X-Forwarded-User"] to my middleware but I can't read headers of the current request in javascript right? That would work if my front facing application would be in PHP for example I guess.
So in this case, how do I get the current user email address?

[igoooor]

I noticed there is the _forward_auth cookie which seems to contains some info (including the user email), but I'm not sure if it's safe/reliable to use this cookie, or if it's even the purpose of that cookie to be used to get user info.

[thomseddon]

Hi - yes, the correct way to get the user is via the X-Forwarded-User header, the way I do this in my own Vue.js SPA's is to write that value into a global javascript variable on page load. What are you using for the http server?

You can also extract the value from the cookie, but this is not a reliable API and the format is liable to change between versions.

[igoooor]

I'm serving my files with an nginx server.
Can you explain a bit more what you describe as write that value into a global javascript variable on page load? I'm not sure to understand how you get that value (I assume the X-Forwarded-User header) in the first place

[igoooor]

@thomseddon would you have time to shortly explain how you do it? Many thanks.

[thomseddon]

Hmm, I tend to deploy my apps with their own server - go, node.js or php, so I use the app server to insert the header variable into the page.

If you're serving directly from nginx, then a possible workaround could be to use the ngx_http_sub_module module to insert the header value into the page, but this probably isn't ideal, so the lightweight app server would be a more portable way to go.

[thomseddon]

Moving to discussion

[AnderssonPeter]

You can enable http header reading using Access-Control-Expose-Headers if I remember correctly!