取数据成功后推送路由器

Question

是否可以在成功获取/检索数据后将用户重定向到另一个页面？在这种情况下，它是关于验证用户的电子邮件地址。当用户点击电子邮件中的给定链接时，他会被重定向到一个页面，在该页面上他的令牌会发送到后端并进行验证。

如果响应成功，我想自动将用户重定向到“/home”页面。不幸的是，它不能以这种方式工作。

If 语句正在工作，因为我在控制台中收到了响应。

<script>
export default {
  async fetch() {
    this.res = await this.$axios.$post(
      `/api/verify-mail/${this.$route.params.id}`
    )

    if (this.res.success) {
      this.$router.push('/home')
      console.log(this.res)
    }
  }
}
</script>

编辑：（改进的代码）

如果条件肯定为真。我在控制台中收到响应。 { success: true, message: 'Your account has been successfully verified' }

因此，条件正常，它正在控制台中写入，但路由器没有推送。

如果它超出条件，它也不起作用。但我发现了一些有趣的东西。如果我强制出错，路由器可以将我推送到“/home”页面。

async fetch() {
   try {
     const res = await this.$axios.$post(
       `/api/verify-mail/${this.$route.params.id}`
     )

     if (res.success) {
       console.log(res)
       this.$router.push('/home')
     }
   } catch (err) {
     this.$router.push('/home') // only for testing, if I force an error I will be redirected
   }
}

home.vue

<template>
  <div>
    <div v-if="getUser.isVerified === false">
      <IsVerified />
    </div>
    <div>
      <h1>Home</h1>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import IsVerified from '../components/verify/IsVerified.vue'
export default {
  auth: false,
  components: { IsVerified },
  computed: {
    ...mapGetters(['getUser']),
  },
}
</script>

验证邮件/_id.vue

<template>
  <div>Test</div>
</template>

<script>
export default {
  data() {
    return {}
  },
  async fetch() {
    try {
      const res = await this.$axios.$post(
        `/api/verify-mail/${this.$route.params.id}`
      )

      if (res.success) {
        console.log(JSON.parse(JSON.stringify(res)))
        console.log(res)
        this.$router.push('/home')
      }
    } catch (err) {
      this.$router.push('/home') // only for testing, if I force an error
    }
  },
}
</script>

<style></style>

IsVerified.vue 组件（/components/verify/IsVerified.vue）

<template>
  <div class="container">
    <div class="message">
      <p>
        Please confirm your email address
        <span class="bold">{{ getUser.email }}</span> to get full access. Token
        is only avaible for 30 minutes.
      </p>
      <button v-show="isShow" @click="sendNewToken()">Send again</button>
      <p v-show="mailSent" class="mail__sent">Email sent</p>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      isShow: true,
      mailSent: false,
    }
  },

  computed: {
    ...mapGetters(['getUser']),
  },

  methods: {
    async sendNewToken() {
      try {
        const send = await this.$axios.$put('/api/send-new-verify-token', {
          data: this.getUser,
        })
        if (send.success) {
          this.isShow = false
          this.mailSent = true
        }
      } catch (err) {
        console.log(err)
      }
    },
  },
}
</script>

package.json

{
  "name": "frontend",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint": "npm run lint:js"
  },
  "dependencies": {
    "@nuxtjs/auth-next": "5.0.0-1624817847.21691f1",
    "@nuxtjs/axios": "^5.13.6",
    "@nuxtjs/recaptcha": "^1.0.4",
    "core-js": "^3.15.1",
    "nuxt": "^2.15.7",
    "sass": "^1.37.5"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.14.7",
    "@nuxtjs/eslint-config": "^6.0.1",
    "@nuxtjs/eslint-module": "^3.0.2",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-vue": "^7.15.1",
    "prettier": "^2.3.2",
    "sass-loader": "^7.3.1"
  }
}

nuxt.config.js

const BackendURL = 'http://localhost:4000'

export default {
  head: {
    title: 'frontend',
    htmlAttrs: {
      lang: 'en',
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  },

  css: [
    '~/assets/css/main.scss',
    '~/assets/fonts/Nunito.css',
    '~/assets/css/style.css',
  ],

  components: true,

  buildModules: ['@nuxtjs/eslint-module'],

  modules: ['@nuxtjs/axios', '@nuxtjs/auth-next', '@nuxtjs/recaptcha'],

  axios: {
    proxy: true,
    baseURL: BackendURL,
  },

  proxy: {
    '/api': BackendURL,
  },

  auth: {
    strategies: {
      local: {
        token: {
          property: 'token',
          type: 'Bearer',
          name: 'token',
        },
        user: {
          property: false,
        },
        endpoints: {
          login: { url: '/api/login', method: 'post' },
          user: { url: '/api/user', method: 'get' },
          logout: { url: '/api/logout', method: 'post' },
        },
      },
    },

    redirect: {
      login: '/', // User will be redirected to this path if login is required
      logout: '/', //User will be redirected to this path if after logout, current route is protected
      callback: '/home', //User will be redirected to this path by the identity provider after login
      home: '/home', // User will be redirected to this path after login. (rewriteRedirects: true, ... will rewrite this path)
    },
    rewriteRedirects: false,
  },

  recaptcha: {
    hideBadge: true, // Hide badge element (v3 & v2 via size=invisible)
    language: 'english',
    size: 'normal', // Size: 'compact', 'normal', 'invisible' (v2)
    siteKey: 'secret',
    version: 2,
  },

  build: {
    babel: {
      plugins: [
        ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
      ],
    },
  },
}

Answer 1

你的方法应该行得通。尝试登录this.$router 以查看它是否可用/是否包含路线信息。

如果您以后不需要res，则不必等待承诺。当请求成功时重定向到/home，否则捕获错误并且什么都没有。

<script>
export default {
  fetch() {
    this.$axios
      .$post(` / api / verify - mail /${this.$route.params.id}`)
      .then(() => {
        this.$router.push("/home");
      })
      .catch(error => {
        //handly error that happened during the call
      });
  }
};
</script>

这样它就可以在不使用res 对象的情况下工作。

Answer 2

试试这种代码，看看它是否适用于你的用例

<script>
export default {
  async fetch() {
    const postedObject = await this.$axios.$post('https://jsonplaceholder.typicode.com/posts', {
      title: 'foo',
      body: 'bar',
      userId: 1,
    })
    console.log('posted object >>', postedObject)
    if (postedObject.title === 'foo') {
      // try with 'baz', it will not router-push
      this.$router.push({ name: 'home' })
    }
  },
}
</script>

这种代码应该完全可以工作。如果不是，则可能是中间件或您的应用配置存在某些特定问题。
出于测试目的，可能需要一个全新的 Nuxt 应用。