programing

라우터 내부 다음('profile').각자가 오류를 발생시키기 전에 이를 파악하기 위해 도움이 필요함

prostudy 2022. 3. 31. 20:32
반응형

라우터 내부 다음('profile').각자가 오류를 발생시키기 전에 이를 파악하기 위해 도움이 필요함

내 앱에 액세스 제어를 추가하려고 한다.그 문제는 다음으로 나에게 다음과 같은 오류를 주는 것이다.

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

다음('profile')에서 다음()로 라인을 변경해 보았는데 문제 없이 작동된다.그것은 다음에도 오류를 준다.그러나 첫 번째 다음 번 로그인에는 아무 문제 없이 작동한다.누가 좀 도와 줄래?

내 코드는:

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

에러 스크린샷

왜 작동이 안 되는지 이해가 안 돼, 다른 방법으로 처음부터 쓰면서 문제가 해결되는지 봐야겠다고 생각했어.그것은 정말로 문제를 해결했다.나는 여전히 문제의 원인이 무엇인지 모르기 때문에 이것을 답으로 표시하지 않을 것이다.하지만 누군가 알고 싶다면 여기 작동 코드가 있다.

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()
    }
  }
})

참조URL: https://stackoverflow.com/questions/55914015/next-profile-inside-router-beforeeach-gives-error-need-help-to-figure-it-out

반응형