[英]how to disable middleware in specific page, nuxt middleware
// 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('/'),另一个用于登录页面(这里我禁用了角色中间件)。 如何禁用此中间件到此登录页面。
你可以用这个
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
,并在其上使用中间件。 不要将这个用于您不想使用中间件的页面。
谢谢 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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.