重定向时清除 Nuxt Auth 中的查询参数答案

【问题标题】：Clear query params in Nuxt Auth on redirect重定向时清除 Nuxt Auth 中的查询参数
【发布时间】：2023-01-09 05:09:56
【问题描述】：

当用户被重定向到定义的重定向路径之一（登录、主页等）时，不会删除查询参数。

例如 - 用户未登录并尝试打开某些受保护的页面example.com/some-protected-page?test=query。然后用户将被重定向到登录页面。完整路径将是example.com/sign-in?test=query，但我希望它是example.com/sign-in，即没有查询参数。

我知道我可以实现一个中间件来检查路由并在需要时清除参数。但我想知道是否有更优雅的方法来做到这一点。

这是我的配置：

  auth: {
    cookie: {
      options: {
        expires: 365,
        secure: process.env.NODE_ENV === 'production',
      },
    },
    strategies: {
      sign_up: {
        scheme: 'local',
        token: {
          property: 'apiKey.accessToken',
          global: true,
          maxAge: 60 * 60 * 24 * 30,
        },
        user: {
          property: '',
          autoFetch: true,
        },
        endpoints: {
          login: { url: '/ActivateUser', method: 'post' },
          logout: { url: '/SignOut', method: 'post' },
          user: { url: '/GetCurrentUser', method: 'post' },
        },
      },
      local: {
        scheme: 'local',
        token: {
          property: 'apiKey.accessToken',
          global: true,
          maxAge: 60 * 60 * 24 * 30,
        },
        user: {
          property: '',
          autoFetch: true,
        },
        endpoints: {
          login: { url: '/SignIn', method: 'post' },
          logout: { url: '/SignOut', method: 'post' },
          user: { url: '/GetCurrentUser', method: 'post' },
        },
      },
    },
    redirect: {
      login: '/sign-in',
      logout: '/sign-in',
      home: '/projects',
      callback: '/sign-in',
    },
    localStorage: false,
    resetOnError: true,
    fullPathRedirect: true,
    rewriteRedirects: false,
  },

【问题讨论】：

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

【解决方案1】：

我有类似的情况，使用 nuxt/auth。当我点击注销按钮时，我被重定向到登录页面，但保留了上一页的查询参数。像你一样，我想把它弄干净。

这个想法是从值中清除查询对象。

this.$router.replace({ query: [] })
this.$auth.logout()

这会清除参数，然后重定向到登录页面。

例如：如果我们获取到的url是https://myApp/hello?test=herethis.$router.replace({ query: [] })，将其转化为这个https://myApp/hello然后nuxt/auth注销并重定向到我的登录页面。

您可以从这篇文章中查看与 vue-router 相关的答案。我从这里拿走的 How to remove query from vue router?

如果用户试图访问您提到的受保护页面，我认为最好的方法是使用中间件而不是这种方式。

希望这有帮助！

【讨论】：