Question

我有一个问题，在我尝试一些解决方案以后，我仍然无法修复谷歌搜索。

我正在使用 router.beforeEach 来检查令牌是否存在。

如果我没有登录并直接在网址栏中输入 localhost / overview ，

需要将登录页面和网址重定向重定向到 localhost / login ，但失败并显示以下错误消息，

超出最大调用堆栈大小

如何修改router.beforeEach方法？

在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

Answer 1

确保您的日志记录路径不需要auth本身/您的机制来检测页面是否需要auth是正确的。

请记住，每次到达路线时都会调用您的导航防护功能，包括您在导航防护装置中以编程方式重定向用户的时间。所以你应该考虑到这一点来创建一个不会循环的函数（即触发一个重定向来触发重定向......）。

在router.beforeEach in vue，vue-router

1 个答案: