如何在 MEVN 堆栈身份验证应用程序中解决被拒绝的路由 promise

Question

我正在尝试使用 Vue.js、Node、Express 和 MongoDB 构建身份验证接口。 到目前为止，我已成功启用用户注册，名称 email 和密码被推送到 MongoDB 数据库中，同时使用 bcrypt package 加密密码。 然后用户在Login.vue中重新输入 email 和密码。 登录似乎可以工作，因为导航栏控件转换以反映正在登录。 但是，屏幕内容不会重新路由到Profile.vue 。 相反，屏幕仍然在Login.vue上，并且控制台中出现一条错误消息，说uncaught (in promise) undefined 。 我已将问题缩小到 Login.vue 中this.$router.push('profile') Login.vue console.log(this.$router.push('profile'))返回Promise {<rejected>: undefined} ，表示重新路由到Profile.vue的 promise 被拒绝。 为了解决这个问题，我尝试在router.js中实现路由保护的不同变体，我认为这可能与 Login.vue 中的this.$router.push('profile') Login.vue 。 关于如何修复路由以解决此问题的任何建议？

登录.vue

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-6 mt-5 mx-auto">
              <v-form
                ref="form"
              >
                <v-text-field
                  v-model="email"
                  label="email"
                  required
                ></v-text-field>

                <v-text-field
                  v-model="password"
                  label="password"
                  required
                  :type="show1 ? 'text' : 'password'"
                ></v-text-field>

                <v-btn
                  class="mr-4"
                  @click.prevent="login"
                >
                  login
                </v-btn>
              </v-form>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import EventBus from './EventBus'

export default {
  data () {
    return {
      email: '',
      password: '',
      show1: false
    }
  },
  methods: {
    async login () {
      let res = await axios.post('http://localhost:5000/users/login', {
        email: this.email,
        password: this.password
      })
        localStorage.setItem('usertoken', res.data)
        this.email = ''
        this.password = ''
        this.emitMethod()
        this.$router.push('profile')
    },
    emitMethod () {
      EventBus.$emit('logged-in', 'loggedin')
    }
  }
}
</script>

路由器.js

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login'
import Register from '@/components/Register'
import Profile from '@/components/Profile'

Vue.use(Router)

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/register',
      name: 'Register',
      component: Register
    },
    {
      path: '/profile',
      name: 'Profile',
      component: Profile,
      meta: {
        requiresAuth: true
      }
    }
  ]
})

router.beforeEach((to, from, next) => {
  const isLoggedIn = localStorage.getItem('token')
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
  if (requiresAuth && !isLoggedIn) next('login')
  else if (!requiresAuth && isLoggedIn) next('profile')
  else next()
})

export default router