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

时间:2020-04-03 16:16:52

标签: vue-router nuxt.js

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

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

我想用这个:

router: {
    middleware: ['auth']
}

如何仅针对不是页面组件的特定路由添加中间件?

2 个答案:

答案 0 :(得分:1)

那不是保护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会出现错误

答案 1 :(得分:0)

您可以添加

<script>
export default {
middleware: 'authenticated'
}
</script>

您要保护的路线中

ps:路由是nuxt中的页面组件