全局路由守卫和pinia同时使用存在的问题

// A代码
// src/router/index.js

import { useMain } from '../store'
const useStoreMain = useMain()

router.beforeEach((to, from, next) => {
    const isManager=useStoreMain.isManager
    // startsWith：匹配以括号内为开头的内容
    if (to.path.startsWith("/HomeManage")) {
        if (isManager) {
            next() // 跳转到下一个路由
        } else {
            ElMessage.error("请先登录")
            next('/Login')
        }
    }
   next()
})

A代码导致如下报错：

报错原因： router 挂载比 pinia 早, 守卫在使用pinia时，pinia还没有挂载

解决办法如B代码：只需将 pinia 写在全局路由守卫里面

// B代码
// src/router/index.js
​
import { useMain } from '../store'
​
router.beforeEach((to, from, next) => {
    const useStoreMain = useMain()
    const isManager=useStoreMain.isManager
    // startsWith：匹配以括号内为开头的内容
    if (to.path.startsWith("/HomeManage")) {
        if (isManager) {
            next() // 跳转到下一个路由
        } else {
            ElMessage.error("请先登录")
            next('/Login')
        }
    }
   next()
})

A代码和B代码只有 pinia创建语句位置 的不同

如果对你有帮助，希望能得到你的点赞或收藏或关注，这是对我最好的鼓励；

如你有问题或疑惑，欢迎在评论区写下，必将努力解答；

如本文有误区，希望你不吝赐教，让我们共勉！