无法正常使用permission鉴权的解决办法

无法正常使用permission鉴权

问题：

我编写了一个permission.js文件用于路由守卫（鉴权），其中用到了pinia（stores）实例。但是现在报错，permission中代码执行的时候，pinia实例还未创建。

如何确保路由守卫在pinia创建后启动：

1. 第一种方法但未解决：将import './src/permission’移至use(router)之后

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'

// 创建 Pinia 实例
const pinia = createPinia()

// 创建 Vue 应用实例
const app = createApp(App)

// 使用 Pinia
app.use(pinia)

// 使用路由
app.use(router)

// 在这里引入 permission.js 文件，确保在路由守卫中使用 Pinia 实例
import './src/permission'

// 挂载 Vue 应用
app.mount('#app')

2. 解决办法二，成功：将permission封装成函数setupRouterGuards，main.js中在use(router)处调用此函数

permission.js:(将permission封装成函数setupRouterGuards)

export function setupRouterGuards() {
//前置守卫
//后置守卫
}

main.js:(在use(router)处调用此函数)

import pinia from '@/stores' 
import router from './router'
//...
import{ setupRouterGuards }from '@/permission' // permission 鉴权

app.use(pinia)
// 路由守卫
setupRouterGuards()
//...
app.mount('#app')

分析

问题根源

在 JavaScript/TypeScript 中，模块的导入顺序和执行顺序是很重要的。在你的原始代码中，你可能直接在文件顶部导入了 ./src/permission，这导致了在 Pinia 还未被创建和添加到 Vue 应用中时，permission.js 中的代码就已经开始执行了。由于 permission.js 依赖于 Pinia 实例（比如用于检查用户权限的 store），这会导致运行时错误，因为此时 Pinia 还未准备好。

解决方案分析

1. 封装成函数：通过将权限逻辑封装成一个函数 setupRouterGuards，你可以控制这个函数何时被调用。这种做法的好处是，你可以在确保所有必要的依赖（如 Pinia）都已设置好之后再调用这个函数。
2. 在正确的时间点调用：在 main.js 中，你在调用 app.use(router) 之后调用了 setupRouterGuards()。这是一个非常合适的时机，因为此时 Pinia 已经被添加到 Vue 应用中，路由也已经被配置好，所以可以安全地设置路由守卫。