如何使用 Nuxt ServerMiddleware 和 Apollo GraphQL 处理 301 重定向

Question

我目前正在构建一个 Vue/Nuxt 应用程序，并结合修改后的 Saleor 安装来在线销售产品。

当我们从现有系统迁移时，我们需要能够处理从旧网站 URL 到新网站 URL 的 301 重定向。

我修改了 API 以响应以下 GraphQL 查询。

export const CHECK_REDIRECTS_QUERY = gql`
  query Redirect($oldPath: String) {
    redirect(oldPath: $oldPath) {
      oldPath
      newPath
    }
  }
`

从 this recommendation 开始，我在 ~/serverMiddleware/redirect.js 文件中创建了以下代码

import { CHECK_REDIRECTS_QUERY } from '~/graphql/navigation/queries'

export default function(req, res, next) {
  console.log('redirects middleware')
  // context.userAgent = process.server ? context.req.headers['user-agent'] : navigator.userAgent
  this.$apollo
    .query({
      query: CHECK_REDIRECTS_QUERY,
      variables: {
        oldPath: '/test/11/old/'
      }
    })
    .then(({ data }) => {
      if (data.redirect.newUrl !== '') {
        res.writeHead(301, { Location: data.redirect.newUrl })
        res.end()
      }
    })
}

我也已将其添加到我的 nuxt.config.js 文件中，如下所示：

 ... 
 serverMiddleware: ['~/serverMiddleware/redirect.js'],
 ...

这不起作用，但我不仅没有得到重定向，我希望函数开头的 console.log 也不会触发。

此外，我还尝试使用 github 建议中编写的代码，这非常 "flakey" 在大约 50 次服务器重新启动时可能会触发两次。

我没有收到任何关于 apollo 不能在 servermiddleware 中使用并且站点的其余部分似乎正常运行的控制台通知。

此外，为了澄清起见，我假设中间件应该在每个页面上自动触发，不需要从组件手动调用？

Answer 1

最后，我在nuxtjs's github

中找到了解决方案

res.writeHead(301, { Location: redirect.to })
res.end()

完成！

Answer 2

组织重定向的最简单方法是使用 Redirect Module

Answer 3

你可以这样使用它：

redirect(302, '/login')
redirect({ name: 'slug', params: { slug: mySlug } })
redirect('https://vuejs.org')

遵循此文档： https://nuxtjs.org/docs/internals-glossary/context/#redirect

如何使用 Nuxt ServerMiddleware 和 Apollo GraphQL 处理 301 重定向

How to process 301 redirects with Nuxt ServerMiddleware and Apollo GraphQL

http-status-code-301

apollo

graphql

nuxt.js

vue-apollo