如何在vue路由器导航保护中使用pinia store ?

Question

我正在使用Vuejs 3, vuerouter 4和pinia，并试图在一些路由中放置导航保护，按照文档中的示例(如果用户未经过身份验证并且不在登录页面上，则将用户发送到登录页面以获得身份验证)。在组件外使用pinia的文档中也解释了这一点。但是我无法理解。

我使用的存储目前很简单(在isAuthenticated上返回false或true):

//authStore.js
import { defineStore } from "pinia";
export const useAuthStore = defineStore( 'AuthStore', {
state: () => {
return {
isAuthenticated: false
}
}
})

我想在routes/index.js中使用isAuthenticated中的beforeEnter

在main.js:

import { useAuthStore } from '@/stores/authStore'
import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router'
import { createPinia } from 'pinia'
const app = createApp(App)
app.use(createPinia()).use(router)
app.mount('#app')
// I'm not using authStore in this file, so this raises an error:
const authStore = useAuthStore()

在router/index.js中:

import { createRouter, createWebHistory } from 'vue-router'
const routes = [
// path for login page,
{
path: '/adm/home',
name: 'AdmView',
component: () => import('@/views/adm/AdmView.vue'),
beforeEnter: (to) => {
// error: authStore is not defined
const isAuthenticated = authStore
if ( !isAuthenticated && to.name !== 'login-adm' ) {
return { name: 'login-adm' }
}
}
},
// other paths
]

Answer 1

您的authStore.js按预期导出useAuthStore，但您没有按要求调用它。

authStore is not defined，因为authStore是授权存储的文件名——相反，您应该执行从该文件导出的函数useAuthStore:

const authStore = useAuthStore();
console.log('Is authenticated?', authStore.isAuthenticated);

Answer 2

我不知道这是否是主要问题，但你忘记在userStore上使用析构函数

const isAuthenticated = authStore

应该是

const { isAuthenticated } = toRefs(authStore);

to表示通过后保持反应性。它可以导入为

import { toRefs } from 'vue';