CODEWITHSUNDEEP
vue.jsvuejs2vue-router
tommychoo
tommychoo

Reputation: 653

Occurs dead loop in router.beforeEach in vue, vue-router

I have issue that i still cant fix it after i try some solution thought google search.

I am using router.beforeEach to check token exist.

If I no login and input localhost/overview in url bar directly,

it need to redirect login page and url redirect to localhost/login but fail and show the error message below,

Maximum call stack size exceeded

How can i modify the router.beforeEach method ?

In router.js

import Vue from 'vue'
import store from '@/store/index'
import Router from 'vue-router'
import Overview from '@/components/Overview'
import Login from '@/components/Login'

Vue.use(Router)

const router = new Router({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'Login',
            component: Login,
            meta: {
                requiresAuth: false
            }
        },
        {
            path: '/overview',
            name: 'Overview',
            component: Overview,
            meta: {
                requiresAuth: true
            }
        },        
        {
            path: '*',
            redirect: '/login',
            meta: {
                requiresAuth: false
            }
        }
    ]
 }



router.beforeEach((to, from, next) => {
    let token = store.state.token
    if (token) {
        if (to.query.redirect) {
            next({path: to.query.redirect})
        } else {
            if (['/login'].includes(to.path)) {
                next({path: '/overview'})
            } else {
                next()
            }
        }
    } else {
        let requiresAuth = to.matched.some(record => record.meta.requiresAuth)
        if (requiresAuth) {
            next({path: '/login', query: { redirect: to.fullPath }})
        } else {
            next()
        }
    }
})


export default router

Upvotes: 0

Views: 1274

Answers (1)

FitzFish
FitzFish

Reputation: 8629

Be sure that your logging path does not require auth itself/that your mechanism to detect if a page needs auth is correct.

Keep in mind that your navigation guard function will be called each time a route is reached, including when you are redirecting the user programatically in your navigation guard itself. So you should take that in account to create a function that will not loop (i.e trigger a redirect that trigger a redirect...).

Upvotes: 2

Related Questions