【问题标题】:How to set middleware for specific route in Nuxt如何在 Nuxt 中为特定路由设置中间件
【发布时间】:2020-07-15 20:57:51
【问题描述】:

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

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

我想用这个:

router: {
    middleware: ['auth']
}

如何只为非页面组件的特定路由添加中间件?

【问题讨论】:

    标签: vue-router nuxt.js


    【解决方案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 你会得到一个错误

    【讨论】:

    【解决方案2】:

    你可以添加

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

    在您要保护的路线中

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

    【讨论】:

    • 谢谢,但它仅适用于组件文件中的页面组件。正如我所提到的,我需要将它用于全局 nuxt.config.js 中的非组件路由 - 这就是问题
    猜你喜欢
    • 2021-04-14
    • 1970-01-01
    • 2021-08-31
    • 1970-01-01
    • 2021-11-27
    • 2019-08-26
    • 2019-01-06
    • 2021-03-31
    • 2013-09-27
    相关资源
    最近更新 更多