vue3在路由里面使用pinia进行路由守卫验证报错

最新推荐文章于 2024-08-29 14:48:21 发布

nihao37

最新推荐文章于 2024-08-29 14:48:21 发布

阅读量564

点赞数 2

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/nihao37/article/details/132445459

版权

文章讲述了在Vue3项目中，由于router的挂载时间早于pinia的状态管理库pinia的使用，导致在路由守卫中尝试访问pinia存储的token时出现错误。解决方案是在router的beforeEach钩子函数中确保pinia已经挂载后再进行操作。

摘要由CSDN通过智能技术生成

在vue3路由守卫使用pinia里面存储的token跟sessionStorage中的tokne进行比对出现报错，如下。

很简单的问题，网上的结果五花八门，最终看文档解决了。原因router挂载比pinia要早，守卫在在使用pinia时，pinia还没有挂载，把pinia写在守卫里面即可解决问题

router.beforeEach((to, from, next) => {
  //在这里创建loginStore 即可
  const loginStore = useLoginStore();
  const token = sessionStorage.getItem('token')
  if (to.path == '/') return next()
  if (token == loginStore.Token) {
    next()
  } else {
    router.push('/')
  }

})