Nuxt SSR - i can't check if a user is authenticated

Question

I'm trying to work on a Nuxt SSR frontend that uses a Django backend with Session Authentication. I would like to have some SSR pages as well as client rendered pages in my frontend, so i'm using Universal mode.

The problem is that i did not find a working approach to check if a user is authenticated before loading a page, so i can't restrict pages to anonymous users. In order to check if a user is authenticated, Django will check if the request's headers contain a cookie, and according to that return if the user is authenticated or not.

Here is what i tried:

1) Middleware

export default async function ({context, redirect}) {
  axios.defaults.withCredentials = true;

  return axios({
    method: 'get',
    url: 'http://127.0.0.1:8000/checkAuth',
    withCredentials: true,
  }).then(function (response) {
    //Redirect if user is authenticated
  }).catch(function (error) {
    console.log(error)
  });
}

Here i'm sending a request to my backend to check if the user is authenticated. The problem is that the middleware is executed from server side, which means there will never be any cookie in the request, even if the user is authenticated. This means that every time i refresh the page, according to the middleware the user is always anonymous, even when the user is authenticated.

2) Plugin

export default function (context, inject) {
  if (process.client){
    console.log('client')
    return axios({
      method: 'get',
      url: 'http://127.0.0.1:8000/checkAuth',
      withCredentials: true,
    }).then(function (response) {
      //IF AUTHENTICATED, REDIRECT
      context.redirect('/')
    }).catch(function (error) {
      console.log(error)
    });
  } else {
    console.log('server')
  }
}

Here i'm trying the same but with a plugin, and i'm "forcing" the plugin to check if the user is authenticated on the backend only when the plugin executes from client side. This works, cookies are sent in the headers and Django receives the cookie, but the problem with this solution is that Nuxt doesn't allow redirecting to other pages from a plugin (https://github.com/nuxt/nuxt.js/issues/4491).

3) Using beforeMount() in Vue

I tried to do that using beforeMount() from my Vue pages, but the problem is that since it will execute AFTER idration, the page will be loaded and after 1/2 seconds the redirect happens, which is kind of ugly.

Is it possible that there isn't a way to do this? Any kind of advice is appreciated

EDIT: the problem is not that i don't know how to code this, the problem is that when Nuxt sends a request to my backend from the server side middleware, the request will not contain any cookie, and because of this my Django backend cannot check the session cookie, which means that the backend cannot check whether or not the user is authenticated. The same code works when the middleware is executed from client side (if i navigate directly to the page instead of refreshing), because the request will contain the cookies.

我试图了解这是否正常，但这可能是Nuxt 的问题。

Answer 1

我确实有一个可用的中间件

export default ({ redirect, store }) => {
  if (store?.$auth?.$state?.loggedIn) {
    redirect('https://secure.url')
  } else {
    redirect('https://login.please')
  }
})