Redirected when going from “/login“ to “/“ via a navigation guard错误

路由版本:"vue-router": "^3.5.2",

添加了路由守卫,然后开始报这个错误,

原因就是路由版本导致的

解决办法

// 导航守卫限制路由跳转
router.beforeEach((to, from, next) => { 
	if (to.path === '/login') {
		next()
		var tokenStr = window.sessionStorage.getItem('token')
	}
	if (!tokenStr) {
		next()
	} else {
		next('/login')
	}
})
// router  要跟你引用的路由名称一致

路由版本3.2到3.0的话,应该可以用下面这个办法解决

1. 

//获取原型对象上的push函数
const originalPush = VueRouter.prototype.push
//修改原型对象中的push方法
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

2.

// 导航守卫限制路由跳转
router.beforeEach((to, from, next) => {
	if (!to.meta.isPublic && !localStorage.token){
		return next('/login')
	}
	next()
})

  • 9
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
这个错误通常是由于在路由守卫中进行了重定向而导致的。可能是因为用户未经身份验证就尝试访问需要身份验证的页面,或者是因为用户已经登录但仍然被重定向到登录页面。为了解决这个问题,你可以检查以下几个方面: 1.确保你的路由守卫中没有重定向到同一个页面,这会导致无限循环重定向。 2.确保你的路由守卫中的重定向逻辑正确,例如在用户未经身份验证时重定向到登录页面。 3.确保你的路由配置正确,例如确保你的路由路径和组件名称正确匹配。 4.如果你使用了token进行身份验证,确保你在登录成功后将token信息放入localStorage(或sessionStorage)中,然后再进行路由跳转。 以下是一个示例代码,演示如何在路由守卫中进行身份验证和重定向: ```javascript import router from './router' import { getToken } from './utils/auth' const whiteList = ['/login'] // 不需要身份验证的页面 router.beforeEach(async(to, from, next) => { const hasToken = getToken() if (hasToken) { // 如果已经登录 if (to.path === '/login') { // 如果访问的是登录页面 next({ path: '/' }) // 重定向到首页 } else { next() // 放行 } } else { // 如果未经身份验证 if (whiteList.indexOf(to.path) !== -1) { // 如果访问的是不需要身份验证的页面 next() // 放行 } else { next(`/login?redirect=${to.path}`) // 重定向到登录页面,并将目标页面路径作为参数传递 } } }) ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值