使用 nuxt/auth 登录后强制页面转换

Question

假设

我正在 nuxt/auth 中实现登录功能。我想实现一个访客登录功能，但是当我按下按钮以访客身份登录时，它没有去/search，而是回到user/login。我希望它不要进入登录页面。指定页面显示片刻，但立即显示user/login。

我们想要实现的目标

我想在按下访客登录按钮后被重定向到指定页面。

代码

带有访客登录按钮的页面

<script>
import * as url from '@/store/constants/url'
export default {
  data ({ $config: { APP_NAME } }) {
    return {
      APP_NAME,
    }
  },

  methods: {
    guest () {
・
・
    .then((response) => {
・
・
      this.$auth.loginWith('local', {data: {
        email: response.email,
        password: "xxxxxx"
      }})
    })
      this.$router.replace('/search') // I get back to the login page without going to /search.
    }
  }
}
</script>

nuxt.config.js

auth: {
    token: {
      global: true
    },
    redirect: {
      login: '/user/login',
      logout: '/user/login',
      callback: false,
      home: '/'
    },
    strategies: {
      local: {
        endpoints: {
          login: { url: '/api/v1/auth/sign_in', method: 'post', propertyName: 'token' },
          logout: { url: '/api/v1/auth/sign_out', method: 'delete' },
          user: false
        }
      }
    }
  },

Answer 1

可能是因为 this.$auth.loginWith 是异步的，这意味着 this.$router.replace('/search') 将在 auth 登录函数返回之前执行。

您可以试试这个：

.then((response) => {
  return this.$auth.loginWith('local', {data: {
    email: response.email,
    password: "xxxxxx"
  }})
})
.then() => { this.$router.replace('/search') }

Answer 2

作为 and in a lot of my previous answers regarding nuxt/auth，你应该有这样的东西。

<script>
export default {
  methods: {
    async logMeIn() {
      const positiveResponseFromBackend = await this.$auth.loginWith('local', {
        data: {
          email: 'fancy email',
          password: 'cool password',
        },
      })
      if (positiveResponseFromBackend) {
        await this.$auth.setUser({
          email: 'fancy email', // can of course be dynamic or fetched from your backend as a response
          password: 'cool password', // same here
        })
      }
    },
  },
}
</script>

这将通过 auth 模块成功登录，因此您将自动重定向到您的 home 值，如 redirects 对象（不需要 router.push).

nuxt.config.js

auth: {
  redirect: {
    home: '/search'
  },
},

使用 nuxt/auth 登录后强制页面转换

Forced page transition after login with nuxt/auth

javascript

authentication

vue.js

nuxt.js

nuxt-auth

假设

我们想要实现的目标

代码