Nuxt/Vue - 如何在呈现页面之前运行代码？答案

【问题标题】：Nuxt/Vue - how to run code before a page is rendered?Nuxt/Vue - 如何在呈现页面之前运行代码？
【发布时间】：2021-07-04 15:42:38
【问题描述】：

我正在构建一个在后端使用 Django 的 Nuxt 应用程序 (SSR)，用于对用户进行身份验证，我使用的是标准 Django Session Auth。

当呈现用户时，我完全被困在需要将用户重定向到登录页面的部分。所以我需要做的是向我的 Django 后端发送一个请求，该请求将返回用户是否经过身份验证。有什么方法可以在我的页面中的 HTML 呈现之前执行代码？

我尝试了什么：

中间件：我尝试使用中间件进行此操作，但出于某种原因，Nuxt 中间件不适用于 Axios。当我从中间件发送请求时，它不会随请求一起发送任何 Cookie，因此我将始终被注销（即使我已登录）。这是 Nuxt 的问题，而不是后端的问题，因为如果我从一个简单的页面尝试相同的请求，它将毫无问题地工作：

export default async function (context) {
  axios.defaults.withCredentials = true;
  return axios({
    method: 'get',
    url: 'http://127.0.0.1:8000/checkAuth',
    withCredentials: true,
  }).then(function (response) {
    //Check if user is authenticated - response is always False
  }).catch(function (error) {
    //Handle error
  });
}

【问题讨论】：

您使用的是 SSR（通用）还是 SPA？
我正在使用SSR，很抱歉没有包含它，我正在编辑中
我认为，由于中间件是在服务器端执行的，因此您无权访问客户端上存在的 cookie。
确实，在查看 Github 之后，这似乎是问题所在。如果我的应用是 SPA，中间件会在客户端执行吗？你知道没有中间件的方法吗？

标签： vue.js nuxt.js

【解决方案1】：

您可以使用插件来做到这一点。首先，您必须在 /plugins 文件夹中创建一个 .js 文件。然后你必须在你的 nuxt.config.js 中包含插件 []。请按照本指南获取更多信息。 https://nuxtjs.org/docs/2.x/directory-structure/plugins/

【讨论】：

【解决方案2】：

可以使用中间件中的上下文对象来访问 Axios。请阅读有关上下文对象的更多信息 (https://nuxtjs.org/docs/concepts/context-helpers/)。所以你的代码看起来像 -

export default function (context) {
    return context.$axios.get("/endpoint").then(response=> { }).catch(error => {} )
}

【讨论】：