在Vue 3项目中，使用路由守卫进行权限控制是一种常见的做法。然而，当涉及到全局状态管理库Pinia时，如何确保路由守卫在Pinia实例创建之后启动，成为了一个需要注意的问题。本文将带你了解一个实际遇到的问题，并提供解决方案，帮助你在项目中正确地使用Pinia进行路由鉴权。
问题背景
在项目中，我们创建了一个permission.js文件，用于实现路由守卫（鉴权）。由于鉴权逻辑需要依赖于Pinia实例中的状态，我们遇到了一个问题：在permission.js执行时，Pinia实例还未创建，导致报错。
问题根源
在JavaScript/TypeScript中，模块的导入顺序和执行顺序是非常关键的。在我们的原始代码中，permission.js在文件顶部被导入，这意味着它在Pinia实例创建之前就已经开始执行了。由于permission.js依赖于Pinia实例，这导致了运行时错误。
解决方案
方案一：调整导入顺序
最初，我们尝试将import './src/permission'移动到use(router)之后，以期望这样能够解决问题。但是，这种方法并没有奏效。
方案二：封装成函数
最终，我们采用了以下步骤成功解决了问题：
- 封装鉴权逻辑为函数：我们将
permission.js中的鉴权逻辑封装成一个函数setupRouterGuards。
// permission.js
export function setupRouterGuards(router) {
// 前置守卫
router.beforeEach((to, from, next) => {
// 鉴权逻辑
});
// 后置守卫
router.afterEach((to, from) => {
// 鉴权逻辑
});
}
- 在正确的时间点调用函数：在
main.js中，我们在调用app.use(router)之后调用了setupRouterGuards(router)。
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import { createPinia } from 'pinia';
const pinia = createPinia();
const app = createApp(App);
app.use(pinia);
app.use(router);
import { setupRouterGuards } from '@/permission'; // 引入鉴权函数
// 在这里调用鉴权函数，确保Pinia实例已创建
setupRouterGuards(router);
app.mount('#app');
总结
通过将鉴权逻辑封装成函数并在正确的时间点调用，我们确保了Pinia实例在路由守卫执行前已经创建。这种方法不仅解决了我们的问题，还提高了代码的可读性和可维护性。 在处理Vue 3项目中的依赖关系时，掌握模块的导入顺序和执行顺序是非常重要的。希望本文能帮助你更好地理解如何在Vue 3和Pinia环境中实现路由守卫鉴权。
