如何在特定页面禁用中间件，nuxt 中间件

Posted 2023-03-27

【中文标题】如何在特定页面禁用中间件，nuxt 中间件

【英文标题】：how to disable middleware in specific page, nuxt middleware

【发布时间】：2021-10-27 15:57:39

【问题描述】：

我已经声明了一个中间件来检查 nuxt.config.js 中每个路由的角色。但想在某些页面禁用。

// in nuxt.config.js =>        
        router: 
            middleware: ['role']
          ,
        
        
        
 // in middleware/role.js =>     
        export default function (app) 
          if (!window.localStorage.getItem('auth.token'))     
            //app.router.push('/auth/login');   
            console.log('middleware');
          
        
        
        
 // in login.vue =>     
            export default 
                role: false,
              
    
    
 // in root page =>
        export default  
          role: false,               
          middleware(app)
            if (!window.localStorage.getItem('auth.token')) 
              app.router.push('/auth/login');
            
          ,    
      

当令牌为空并重定向用户时，页面会一次又一次地加载，所以我评论此重定向并控制台记录一条消息，以检查发生了什么。 此角色中间件正在加载到角色中间件设置为 false 的页面上。 检查下面的图片。

在这里您可以看到中间件打印了两次，一个用于 root('/')，​​另一个用于登录页面（这里我禁用了角色中间件）。如何禁用这个中间件到这个登录页面。

【问题讨论】：

您可以检查中间件中的 route.path 并在此变量等于您的路径时返回。

【参考方案1】：

你可以用这个

middleware( route ) 
  if (!['do-not-run-here', 'public-page', 'index'].includes(route.name)) return

  // all your cool code here
  console.log('passed')
,

如果这是一个您不想拥有中间件的页面，您可以快速返回。在我的示例中，我们确实检查了路由的名称，如果它是 do-no-run-here、public-page 或 index，则中间件根本不会在那里执行。 当然，如果你想确定页面的名称，设置一个name 属性是很好的。

在所有其他的中间件上，中间件都可以正常运行。 middleware: false 如果是您要找的，则没有。

---

另一种解决方案是对某些页面使用特定的layout，并在其上使用中间件。不要将这个用于您不想使用中间件的页面。

【讨论】：

你能否解释更多或使用示例代码..我们应该在 nuxt 配置或这个人提到的特定页面中使用你的代码？

@ArianFm 代码的 sn-p 可以在你想要的地方使用。它可以是一个.vue 页面，可以是一个全局中间件，也可以是您为每个组件使用的“经典”中间件。我没有说得更具体，因为这取决于您的用例。

我正在使用 nuxt 身份验证，我的中间件看起来像这样（在 nuxt.config.js 中）： router: middleware:['auth'] ,

@ArianFm 如果您尝试在特定页面中禁用 nuxt auth 中间件，您可以使用以下命令：auth.nuxtjs.org/guide/middleware 另外，请随时提出新问题。我不确定这是 OP 在这里提出的完全相同的问题。

非常感谢您的指导，我不敢相信没有看到中间件文档的那部分：D