반응형
라우터 내부 다음('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()
}
}
})
반응형
'programing' 카테고리의 다른 글
왜 Python은 제곱근에 대해 "잘못된" 대답을 하는가?파이썬 2의 정수분할이란? (0) | 2022.03.31 |
---|---|
별도의 구성 요소에 가져오기 기능 삽입 (0) | 2022.03.31 |
v-data-table에 클릭 이벤트를 추가하는 방법 (0) | 2022.03.30 |
'Next' 속성이 'Observable<{}') 유형에 없음 (0) | 2022.03.30 |
python이 설치된 위치 찾기(기본 dir이 아닌 경우) (0) | 2022.03.30 |