时间戳

首页 > 解决方案 > 如何在 Nuxt 中为特定路由设置中间件

vue-router - 如何在 Nuxt 中为特定路由设置中间件

问题描述

我正在尝试使用 Nuxt auth 模块保护我的 Nuxt.js 应用程序中的 api 路由。在我的 nuxt.config.js 我有：

serverMiddleware: [
    { path: '/api', handler: '~/api/index.js' }
]

我想用这个：

router: {
    middleware: ['auth']
}

如何仅为不是页面组件的特定路由添加中间件？

标签： vue-routernuxt.js

解决方案

这不是保护 API 路由的方法。我猜你在这里使用的是 express.js 服务器。

例如：您有一个 API 端点/getUserData。使用 express.js，它看起来像这样：

app.get("/getUserData/:user", ()=> {
   res.json({
      message: "I am a protected API endpoint."
   });
});

为了保护这个端点，你应该创建一个中间件来检查用户是否被允许进入这个 API 端点。让我们创建一个示例。首先创建一个函数，我们称之为“auth”：

function auth(req, res, next){
   let user = req.params.user;
   if(user == "admin"){
      next(); //This means to continue its request
   }else {
      res.status(403).json({ message: "Sorry, but you are not allowed }); //Status 403 means forbidden.
   }
}

好的，现在我们有了一个非常简单的身份验证中间件，我们只需要将它实现到我们需要的每个 API 端点。

app.get("/getUserData/:user", auth,  ()=> {
   res.json({
      message: "I am a protected API endpoint."
   });
});

我已将auth中间件添加到此路由以保护它。你现在可以测试它。与localhost:3000/api/getUserData/admin你应该看到的消息。如果你选择不同的东西，admin你会得到一个错误

推荐阅读