Nuxt SSR - 我无法检查用户是否经过身份验证

Question

我正在尝试使用带有会话身份验证的 Django 后端的 Nuxt SSR 前端。 我想在我的前端有一些 SSR 页面以及客户端呈现的页面，所以我使用 通用模式。

问题是我没有找到一种可行的方法来在加载页面之前检查用户是否经过身份验证，因此我无法将页面限制为匿名用户。为了检查用户是否通过身份验证，Django 将检查请求的标头中是否包含 cookie，并根据该返回的用户是否通过身份验证。

这是我尝试过的：

1) 中间件

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)
  });
}

在这里，我正在向我的后端发送一个请求，以检查用户是否已通过身份验证。问题是中间件是从服务器端执行的，这意味着请求中永远不会有任何 cookie，即使用户经过身份验证。这意味着每次我刷新页面时，根据中间件，用户始终是匿名的，即使用户经过身份验证也是如此。

2) 插件

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')
  }
}

我在这里尝试相同但使用插件，并且我“强制”插件仅在插件从客户端执行时检查用户是否在后端进行身份验证。这可行，cookie 在标头中发送，Django 接收 cookie，但此解决方案的问题是 Nuxt 不允许从插件重定向到其他页面 (https://github.com/nuxt/nuxt.js/issues/4491)。

3) 在 Vue 中使用 beforeMount()

我尝试使用我的 Vue 页面中的 beforeMount() 来执行此操作，但问题是由于它将在 idration 之后执行，因此页面将被加载并在 1/2 秒后发生重定向，有点丑。

有没有办法做到这一点？任何形式的建议表示赞赏

编辑：问题是不是我不知道如何编码，问题是当 Nuxt 从服务器端向我的后端发送请求时中间件，请求不会包含任何 cookie，因此我的 Django 后端无法检查会话 cookie，这意味着后端无法检查用户是否经过身份验证。当从客户端执行中间件时，相同的代码工作（如果我直接导​​航到页面而不是刷新），因为请求将包含 cookie。

我正在尝试了解这是否正常，但这可能是带有 Nuxt 的 issue。

Answer 1

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

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