vue.js - Next (‘profile’ ) inside router.beforeEach 给出错误，需要帮助来解决

Question

我正在尝试在我的应用中添加访问控制。问题是 next('profile') 给我一个错误提示:

[vue-router] uncaught error during route navigation:
Invalid object

我尝试将行从 next('profile') 更改为 next() 并且它没有任何问题。它也会为 next(‘login’) 给出错误。但是第一个 next('login') 没有任何问题。有人可以帮帮我吗？

我的代码是:

router.beforeEach((to, from, next) => {
  // Checking if user has verified the mobile number using firebase
  const currentUser = firebase.auth().currentUser
  // Checking if the requested path has meta requiresAuth
  var isUserLoggedIn = false
  const loginTokenExistsFlag = CookieManager.checkIfLoginTokenExists()
  if (loginTokenExistsFlag && currentUser) {
    isUserLoggedIn = true
  }
  var isUserActivated = false
  const profileDetails = CookieManager.getProfileDetails()
  if (profileDetails != null) {
    if (
      profileDetails.profile_user_description == null &&
      profileDetails.profile_name == null
    ) {
      isUserActivated = false
    }
  }
  if (isUserLoggedIn == false) {
    next('login')
  } else if (isUserLoggedIn == true && isUserActivated == false) {
    next('profile')
  } else {
    next()
  }
})

路由定义

const router = new Router({
  mode: 'history',
  linkActiveClass: 'active',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      redirect: '/login'
    },
    {
      path: '/home',
      name: 'home',
      component: Home,
      meta: {
        requiresAuth: true
      }
    },
    {
      path: '/profile',
      name: 'profile',
      component: Profile,
      meta: {
        requiresAuth: true
      }
    },
    {
      path: '/login',
      name: 'login',
      component: Login
    },
    {
      path: '*',
      redirect: '/login'
    }
  ]
})
export default router

---

Answer 1

我不明白为什么它不起作用，我想我会以其他方式从头开始编写它，看看是否能解决问题。它确实解决了这个问题。我不会将此标记为答案，因为我仍然不知道是什么导致了问题中的问题。但如果有人想知道，这里是工作代码。

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home.vue'
import Login from '@/views/Login.vue'
import Profile from '@/views/Profile.vue'
import firebase from 'firebase/app'
import 'firebase/auth'
import CookieManager from '@/managers/CookieManager.js'

Vue.use(Router)

const router = new Router({
  mode: 'history',
  linkActiveClass: 'active',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      redirect: '/home'
    },
    {
      path: '/home',
      name: 'home',
      component: Home,
      meta: {
        requiresAuth: true,
        requiresActivation: true
      }
    },
    {
      path: '/profile',
      name: 'profile',
      component: Profile,
      meta: {
        requiresAuth: true
      }
    },
    {
      path: '/login',
      name: 'login',
      component: Login
    }
  ]
})
export default router

router.beforeEach((to, from, next) => {
  // Checking if user has verified the mobile number using firebase
  const currentUser = firebase.auth().currentUser
  var isUserLoggedIn = false
  const loginTokenExistsFlag = CookieManager.checkIfLoginTokenExists()
  if (loginTokenExistsFlag && currentUser) {
    isUserLoggedIn = true
  }
  var isUserActivated = false
  const profileDetails = CookieManager.getProfileDetails()
  if (profileDetails != null) {
    if (
      profileDetails.profile_user_description == null &&
      profileDetails.profile_name == null
    ) {
      isUserActivated = false
    }
  }

  // Checking if the requested path has meta requiresAuth
  var requiresAuth = to.matched.some(record => record.meta.requiresAuth)
  var requiresActivation = to.matched.some(
    record => record.meta.requiresActivation
  )

  if (requiresAuth && requiresActivation) {
    if (isUserLoggedIn && isUserActivated) {
      next()
    } else if (requiresAuth && !isUserActivated) {
      next('/profile')
    } else {
      next('/login')
    }
  } else if (requiresAuth && !requiresActivation) {
    next()
  } else if (!requiresAuth) {
    if (isUserLoggedIn) {
      next('/home')
    } else {
      next()
    }
  }
})