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

时间:2019-10-10 15:55:58

标签: graphql apollo http-status-code-301 nuxt vue-apollo

我目前正在构建一个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建议中编写的代码,这大约是在50次服务器重启中触发两次的非常“易燃”的操作。

我没有收到任何有关服务器中间件无法使用apollo的控制台通知,并且该网站的其余部分似乎正常运行。

此外,为了澄清起见,我假设中间件应仅在每个页面上自动触发,而无需从组件中手动调用?

2 个答案:

答案 0 :(得分:3)

最后,我在nuxtjs's github

中找到了解决方案
res.writeHead(301, { Location: redirect.to })
res.end()

完成!

答案 1 :(得分:0)

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