无法正常使用permission鉴权
问题:
我编写了一个permission.js文件用于路由守卫(鉴权),其中用到了pinia(stores)实例。但是现在报错,permission中代码执行的时候,pinia实例还未创建。
如何确保路由守卫在pinia创建后启动:
- 第一种方法但未解决:将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')
- 解决办法二,成功:将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 还未准备好。
解决方案分析
- 封装成函数:通过将权限逻辑封装成一个函数
setupRouterGuards
,你可以控制这个函数何时被调用。这种做法的好处是,你可以在确保所有必要的依赖(如 Pinia)都已设置好之后再调用这个函数。 - 在正确的时间点调用:在
main.js
中,你在调用app.use(router)
之后调用了setupRouterGuards()
。这是一个非常合适的时机,因为此时 Pinia 已经被添加到 Vue 应用中,路由也已经被配置好,所以可以安全地设置路由守卫。