全局路由守卫和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代码导致如下报错:

全局路由守卫和pinia同时使用存在的问题_第1张图片

报错原因: 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创建语句位置 的不同

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

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

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

你可能感兴趣的:(前端,javascript,vue)