如何通过Nuxt中间件实现跳转至外部站点？

你当前在layout层调用客户端APIwindow.location.replace()触发跳转的时机太晚：SSR模式下服务端已经将页面内容渲染成HTML返回给浏览器，浏览器开始解析渲染页面后才会执行客户端侧的跳转逻辑，因此必然会出现原页面短暂闪现的问题。

使用Nuxt路由中间件，在服务端处理请求阶段就完成重定向判断和跳转操作，不需要等到内容下发到客户端。

步骤1：创建路由中间件 #

在Nuxt项目的middleware/目录下创建中间件文件，这里以Nuxt3的全局中间件为例：

// middleware/auth.redirect.global.ts
export default defineNuxtRouteMiddleware(async (to, from) => {
  // 替换为你自己的用户组判断逻辑，可从cookie、状态管理、接口中获取用户信息
  const currentUserGroup = '待替换的当前用户所属用户组'
  const targetRedirectGroups = ['groupA', 'groupB'] // 替换为需要重定向的用户组列表
  const externalTargetUrl = 'https://你要跳转的外部地址'

  if (targetRedirectGroups.includes(currentUserGroup)) {
    // 服务端环境直接返回302重定向响应
    if (process.server) {
      return sendRedirect(useRequestEvent(), externalTargetUrl, 302)
    }
    // fallback客户端侧跳转逻辑
    return navigateTo(externalTargetUrl, { external: true })
  }
})

带.global后缀的中间件会自动对所有路由生效，如果仅需要对部分路由生效，可以去掉.global后缀，在对应页面的definePageMeta中手动引入中间件即可：

// 需应用中间件的页面组件script部分
definePageMeta({
  middleware: ['auth.redirect']
})

适配Nuxt2的方案 #

如果你使用的是Nuxt2，可在中间件中通过上下文对象的redirect方法直接触发服务端跳转：

// middleware/auth.redirect.js
export default function (context) {
  const currentUserGroup = '当前用户组'
  const targetRedirectGroups = ['groupA', 'groupB']
  const externalTargetUrl = 'https://跳转地址'

  if (targetRedirectGroups.includes(currentUserGroup)) {
    context.redirect(302, externalTargetUrl)
  }
}

修改完成后重启项目，匹配重定向规则时服务端会直接返回302重定向响应，浏览器不会接收到原页面的渲染内容，完全避免页面闪现问题。

内容的提问来源于stack exchange，提问作者A D