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

Question

我声明了一个中间件来检查 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('/')，另一个用于登录页面（这里我禁用了角色中间件）。如何禁用这个登录页面的中间件。

Answer 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

，并在其上放置中间件。不要将这个用于您不想使用中间件的页面。

Answer 2

谢谢 Sourav 和 Kissu，这篇文章帮助我在 Nuxt 3 项目中完成了类似的事情。我使用了你的想法的一个变体来排除服务器中间件上的路由。

愿它能帮助未来的冒险家找到通往这个地方的路

// ~/server/middleware/auth.ts

import type { IncomingMessage, ServerResponse } from "http";
// other imports

export default async (req: IncomingMessage, res: ServerResponse) => {
  const reqUrl = req.url;

  /**
   * Public Endpoints
   *
   * /api/ routes explicitly excluded from this auth middleware
   */

  if (req.url.includes("api/example")) return;

Answer 3

这是如何在 Nuxt 3 全局中间件中过滤页面

export default defineNuxtRouteMiddleware(
  (to, from) => {
    // you can use params to & from of middleware to check like this
    if (['demo'].includes(to.name as string)) {
      return // here this middleware will not execute anything with specific routes in the array.
    }
  })

希望这有帮助。