Authorization between nuxtjs and the backend API

Question

I have a Vuejs application created using Nuxtjs. I am also using Django as the backend server, and I made an API to interact with the backend server (Django) and front-end app (Vuejs/Nuxtjs). And any API related fetch are done in the AsyncData function of the page to render the data on the server-side using axios. Also, I am using json web token authentication, and the API generates a jwt token after successful login which is stored in the cookie. So on the backend, it will always check for the request's authorization header for the token. If the request is from a logged in user (authorized token) then return authenticated json data, or else return non authenticated data.

The problem:

When the user navigates to the app, I would like to check if the user is authenticated. If the user is authenticated, render the authenticated page. If not then display non authenticated page.

My thoughts:

When the fetch is done from the App on the AsyncData function, I would check whether there is any value for the cookie. If there is then send the token with the request's authorization header. But, since the page will be rendered on the server first, and not on the client side (where the cookie actually is) it will never find the token for the authorization.

How can I check if the user is already logged in or not so that I can get authenticated and non authenticated data respectively from the API?

Update

When I successfully log in (post authorized email and password), I get a json response back with the token, which I set in the cookie like this:

this.$cookie.set('my_auth_token', this.token, {expires: 15})

How can I retrieve client side cookie and into the nuxt server for server side rendering?

Answer 1

Cookies are exposed in the (Express) Nuxt server through middleware.

Specifically, they can be read from the req.headers.cookie property. You can see an example implementation of this in the Nuxt documentation.

Regarding your implementation: fetching the privileged data from your API using Node would seem to be the ideal way to delegate session handling to that single service (rather than both) and provide SSR for your users.

If you've chosen to instead implement your session handling on the Django service then you'll need to "forward" your cookies by passing them into your axios request headers.