接手一个项目然后添加功能,代码在本地运行时候发现不能登录,报错如下:
然后查了好几个方法都不行,报错意思是说promise抓不到catch,
然后$router.push.catch了一下,报错这样:
既然错误浮出水面,很明显是路由前置守卫拦截了,我在main.js里查找下原因,代码是这样:
router.beforeEach((to, from, next)=>{
//获取用户信息
let usermessage=window.sessionStorage.getItem('usermessage')
//验证跳转路由和用户信息
if(to.name !== 'login'&&!usermessage[0].PersonName){
next({path:'/login'})
}else{
next()
}
})
看着没毛病,但是查找发现获取不到用户信息,所以路由无法跳转
然后发现在login页面里,是这么存用户信息的
this.$router.push("/personal").catch(err=>{console.log(err)})
window.sessionStorage.setItem('usermessage', JSON.stringify(res.data.data))
这是转成了字符串,所以在从sessionStorage中获取信息时,不是对象,而是字符串,所以取不到用户名(关键他是先跳转,后存信息。。。。。)
然后我在main.js中路由守卫改一下,JSON.parse转一下
router.beforeEach((to, from, next)=>{
let usermessage=window.sessionStorage.getItem('usermessage')
if(to.name !== 'login'&&!JSON.parse(usermessage)[0].PersonName){
next({path:'/login'})
}else{
next()
}
})
顺便login也改下,先存信息,后跳转。致此问题解决了。但是回想一下逻辑,线上代码还是原来的写法,跑的好好地,随便会有报错,而且是点一次登录不行,需要点第二次登录才可以,很明显就是因为它逻辑顺序问题了。但是这次却进不去了,这就很奇怪。有更深研究的朋友可以告知一下,谢谢!