使用 nuxt.js 在每个页面中验证 http headers 以进行身份验证

Question

我正在尝试验证 每个 HTTP 请求 到 nuxt 服务器的授权。

在这个official tutorial中，它要求我在每个页面中添加一个验证函数，这似乎对我不起作用，因为我正在寻找一种方法来编写一个验证所有请求的中间件到nuxt服务器.

于是，找到了nuxt的中间件支持，但是官方文档实在是太不友好了，完全看不懂

我期待的是一个 plugin-like 模块，它允许我将我的中间件放入 nuxt。就像在 Express 中可以实现的一样（如下）。

export default function (req, res, next)

这样我就可以轻松验证 headers 每个对 nuxt 的请求。

我怎样才能做到这一点？非常感谢。

Answer 1

我相信Nuxt Middleware就是您所需要的。

在middleware/auth.js

// write any custom validation functions

export default function (context) {
  context.userAgent = process.server
    ? context.req.headers['user-agent']
    : navigator.userAgent
}

然后在 nuxt.config.js

// this will register the middleware functions above for every route

export default {
  router: {
    middleware: 'auth'
  }
}

Answer 2

转到您的目录 middleware/ 并创建一个 auth.js

第一个参数是你的上下文。上下文包含很多东西，比如你的商店、应用程序、路线、重定向，它还包含 req

您可以查看其中包含的上下文：https://nuxtjs.org/api/context/

export default function ({ req, res, redirect }) {
  let authenticated = false;
  if(!authenticated) {
     redirect("/login")
  }
}

您现在可以转到您的页面，并将其添加到您的 export default {}

middleware: ["auth"]

现在，如果您尝试访问该页面，您应该被重定向到登录

使用 nuxt.js 在每个页面中验证 http headers 以进行身份验证

Validate http headers for authentication in every page using nuxt.js

node.js

vue.js

server-side-rendering

nuxt.js

使用 nuxt.js 在每个页面中验证 http headers 以进行身份​​验证

Validate http headers for authentication in every page using nuxt.js

node.js

vue.js

server-side-rendering

nuxt.js

使用 nuxt.js 在每个页面中验证 http headers 以进行身份验证