Nuxt Auth 模块 - 注销后的多个重定向选项

Question

我有一个网站，用户登录后可以访问仪表板。用户可以从他们的仪表板以及主页登录和注销。现在我希望当用户从仪表板注销时，他会被定向到与从主页注销时不同的页面。 Nuxt 中的auth 模块是否可以做到这一点？到目前为止我还没有找到方法。

我的 nuxt.config.js 现在看起来像这样：

auth: {
    redirect: {
      home: "/",
      login: "/"
    },
    strategies: {
      local: {
        endpoints: {
          login: { url: "/api/session", method: "post" },
          logout: { url: "/api/session", method: "destroy" },
          user: { url: "/api/settings", method: "get", propertyName: false }
        },
        tokenType: 'Bearer'
      }
    },
    redirect: {
      login: '/',
      logout: '/',
      home: false,
    },
  }

然后是主页上的按钮：

<span v-if="this.$store.state.auth.loggedIn" class="inline-flex rounded-md shadow">
<button
  @click="$auth.logout()"
  v-scroll-to="'#login'"
  >Logout</button>
</span>

以及仪表板中的按钮：

<button
  @click="$auth.logout()"
>
<span class="font-normal text-sm mt-0/5">Logout</span>
</button>

Answer 1

nuxt auth 模块没有为不同的场景提供多个重定向选项。 但是有两种不优雅的方法可以实现这一点：
方法一：使用onRedirect更改目标重定向网址
写一个插件plugins/auth.js，内容如下：

export default function({ $auth }) {
 $auth.onRedirect((to, from) => {
   if(from === '/dashboard'){return '/another-logout'}
 })
}

在nuxt.config.js注册插件：

{
  auth: {
    plugins: [ '~/plugins/auth.js' ],
    strategies: {}
  }
}

方法二：覆盖watchLoggedIn逻辑，添加logoutWith方法

1. 首先，禁用默认手表登录：

{
  auth: {
    watchLoggedIn: false, // add this line
    strategies: {}
  }
}

1. 听 loggedIn 并为 $auth 扩展“logoutWith”
   用内容创建一个插件plugin/auth.js：

function routeOption (route, key, value) {
  return route.matched.some((m) => {
    if (process.client) {
      return Object.values(m.components).some(component => component.options && component.options[key] === value)
    } else {
      return Object.values(m.components).some(component => Object.values(component._Ctor).some(ctor => ctor.options && ctor.options[key] === value))
    }
  })
}
export default function ({ $auth }) {
  $auth.$storage.watchState('loggedIn', (loggedIn) => {
    if (!routeOption($auth.ctx.route, 'auth', false)) {
      let redirectKey = loggedIn ? 'home' : 'logout'
      if (redirectKey == 'logout') {
        const logout_type = $auth.$storage.getUniversal('logout_type')
        if (logout_type) {
          redirectKey = 'logout_' + logout_type
          // delete to ensure use only once
          $auth.$storage.removeUniversal('logout_type')
        }
      }
      $auth.redirect(redirectKey)
    }
  })
  $auth.logoutWith = (logout_type, ...args) => {
    $auth.$storage.setUniversal('logout_type', logout_type)
    $auth.logout(...args)
  }
}

别忘了在nuxt.config.js注册插件

1. 更新您的redirect 选项并在任何页面中调用logoutWith：

{
  auth: {
    watchLoggedIn: false,
    plugins: [ '~/plugins/auth.js' ],
    redirect: {
      login: '/login',
      logout: '/logout',
      logout_dash: '/another_logout',
      home: '/home'
    },
  }
}

在dashboard.vue页面中：

<button @click="$auth.logoutWith('dash')"></button>

顺便说一句，如果你想根据路由重定向到另一个登录页面，也许方法一更合适

Answer 2

你为什么不把重定向设置为 false

redirect: false,

并在注销不同页面后使用路由器手动重定向到您想要的任何页面

Answer 3

我认为你可以简单地使用$router.push('/dashboard'):

<button @click="$auth.logout();$router.push('/dashboard')">
    <span class="font-normal text-sm mt-0/5">Logout</span>
</button>