在 Nuxt 中间件中获取请求的页面路由答案

【问题标题】：Getting requested page route in Nuxt middleware在 Nuxt 中间件中获取请求的页面路由
【发布时间】：2020-09-25 00:21:07
【问题描述】：

我有一个非常简单的“命名”Nuxt 中间件设置（取自文档），它会在商店中检查用户是否经过身份验证，然后才能导航到某些路线。如果用户未通过身份验证，他们将被定向到一个简单的表单，他们必须提供一个电子邮件地址才能获得访问权限（http://example.com/access）。在完成中间件的store.state.authenticated 检查后，所有这些都可以正常工作。

export default function ({ store, redirect }) {
  if (!store.state.authenticated) {
    return redirect('/access')
  }
}

我的问题是，一旦用户输入了他们的电子邮件地址，我就无法知道他们最初尝试访问的路线。我在这里查看了有关passing data between routes 的其他问题，但由于中间件的工作方式，这些解决方案似乎不可行。

我真的不想将 slug 设置为 vuex 状态，因为这会导致其他一系列复杂情况——我也不介意将预期的 slug 设置为 /access 上的查询或参数网址。我有 read through the docs 用于 Nuxt redirect 函数，并意识到您可以将 route.query 作为参数传递。所以看起来你可能会做这样的事情：

return redirect('/access', intendedSlug)

...或者，如果使用 params(?)：

return redirect(`/access/${intendedSlug}`)

但我首先不知道如何将 intendedSlug 值传递给中间件，因为它没有暴露在传递给函数或其他任何地方的 context 上。这似乎是一个常见问题，但我找不到任何简单的解决方案 - 任何帮助将不胜感激！

【问题讨论】：

你有没有想过这个问题？我遇到了完全相同的问题，但没有找到任何可能有帮助的东西！
嘿@bodger，我已经为你发布了答案:-)

标签： vue.js nuxt.js vue-router

【解决方案1】：

为了帮助@Bodger，我发布了我是如何解决这个问题的，它可能并不完美，它正在使用稍旧版本的 Nuxt（我知道?！），但这就是我解决问题的方法。

.../middleware/authenticated.js

export default function (context) {
  const path =
    context.route.path.length && context.route.path[0] === '/'
      ? context.route.path.slice(1)
      : context.route.path
  const pathArray = path.split('/')
  if (process.server && !context.store.state.authenticated) {
    return context.redirect('/access', pathArray)
  } else if (!context.store.state.authenticated) {
    return context.redirect('/access', pathArray)
  }
}

然后可以在我的/access 页面中访问pathArray。

.../pages/access.js

data() {
    return {
      attemptedRoutePathArray: Object.values(this.$route.query)
      ...
    }
  },
...
computed: {
    attemptedRouteURL() {
      return new URL(
        this.attemptedRoutePathArray.join('/'),
        process.env.baseUrl
      )
    },
    ...
}

【讨论】：