2

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

4

1 回答 1

0

你可以用这个

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如果你想确定页面的名称，设置一个 prop 是很好的。

在所有其他的中间件上，中间件将运行得非常好。没有middleware: false如果它是你正在寻找的东西。

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

于 2021-08-30T13:57:50.280 回答