某日,接到一个需求,从a网站后台管理页面跳转到我(后续用b表示)后台管理页面,然后从b也可以跳到a;
在路由钩子里做了处理;将token保存到本地,然后跳转到后台管理页面; 本地测试-完美; 部署上线后-跳转到login页面;大跌眼镜,问题出在哪里了?
开始排查: 1.首先发现线上部署没有打印,现将打印console放开; 2. 放开以后,从a 跳转到b, 发现 可以进入到b, 但是b后台管理页面,头部的退出登录组件丢失;【我打断点,完了后续网址直接粘贴过来,就进入我打好的断点里,调试小技巧】 3.好吧,那就先排查组件丢失的问题,发现这个组件, 没有导入,在本地可以生效; 但是部署上线后,就没有加载了; 据说vue3有插件,不用导入组件,就可以用;先用导入的方式给引入组件 4. 引入组件以后还是出不来,再一看,控制台报错 onMounted没有引入;再次手动引入, 发现正常了,挺高兴。 5. 好的,继续排查,从a跳到b,我在b的路由钩子beforeEach里打上断点,发现了问题, 在发送某个请求的时候,token丢失了;但是有的时候token不会丢失;经过排查发现,可能是localStorage的影响;于是直接localStorage.clear()来排除这个因素; 6.然后发现token丢失的原因是在请求拦截器里 使用了pinia里的userStore的token,而这个token是使用了vueuse的useStorage方法去获取和设置的; 但是我在路由钩子里是直接用localStorage.setItem(“accessToken”)来设置的,也就是我没有存在pinia的userStorage里,从而拿不到,请求的时候请求头Authorizatino里没有携带token;就报错了 7. 期间,用postman测试了接口没问题,说明不是接口的问题