Как разрешить отклоненное обещание маршрута в приложении аутентификации стека MEVN

Question

Я пытаюсь создать интерфейс аутентификации с помощью Vue.js, Node, Express и MongoDB.До сих пор я успешно включал регистрацию пользователей, когда имя, адрес электронной почты и пароль помещались в базу данных MongoDB при использовании пакета bcrypt для шифрования пароля.Затем пользователь повторно вводит адрес электронной почты и пароль в Login.vue.Логин, кажется, работает, поскольку панель навигации управляет переходом, чтобы отразить вход в систему.Однако содержимое экрана не перенаправляется на Profile.vue.Вместо этого экран остается на Login.vue, и в консоли появляется сообщение об ошибке с надписью uncaught (in promise) undefined.Я сузил вопрос до this.$router.push('profile') в Login.vue.console.log(this.$router.push('profile')) возвращает Promise {<rejected>: undefined}, указывая на то, что обещание перенаправить на Profile.vue было отклонено.Чтобы исправить это, я попытался реализовать различные варианты защиты маршрута в router.js, которые, как я полагал, могут вступать в конфликт с this.$router.push('profile') в Login.vue.Любая рекомендация о том, как исправить маршрутизацию для решения этой проблемы?

Login.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>

router.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