从组合中获取vue路由器内部的用户数据时遇到问题

Question

我是vue.js的新手，目前正在为大学做最后一份作业。

我正试图将我的用户信息输入到我的路由器中，这在我通常的页面/组件上很好，但在这些文件上使用的技术似乎在这里不起作用。我试着通读了一些关于路由器和构图的文档，但我似乎不知道哪里出了问题。这是我最近的一次尝试，因为之前我没有使用setup()并得到错误；inject() can only be used inside setup() or functional components.

问题出现在"；useAuth；我没有得到任何数据，我的console.log(isAdmin)显示"未定义"，这应该是布尔值true/false。

路由器代码：

import { createWebHistory, createRouter } from "vue-router";
import Dashboard from "../pages/DashboardSDT.vue";
import Events from "../pages/EventsSDT.vue";
import Results from "../pages/ResultsSDT.vue";
import Admin from "../pages/AdminSDT.vue";
import Settings from "../pages/SettingsSDT.vue";
import Login from "../pages/LoginSDT.vue";
import Register from "../pages/RegisterSDT.vue";
import { getAuth } from "firebase/auth";
import useAuth from "../composition/useAuth";
const routes = [
{
path: "/",
name: "Dashboard",
component: Dashboard
},
{
path: "/Events",
name: "Events",
component: Events
},
{
path: "/Results",
name: "Results",
component: Results
},
{
path: "/Admin",
name: "Admin",
component: Admin,
meta: { onlyAdminUser: true }
},
{
path: "/Settings",
name: "Settings",
component: Settings,
meta: { onlyAuthUser: true }
},
{
path: "/Login",
name: "Login",
component: Login,
meta: { onlyGuestUser: true }
},
{
path: "/Register",
name: "Register",
component: Register,
meta: { onlyGuestUser: true }
}
]
const router = createRouter({
history: createWebHistory(),
routes
})

router.beforeEach((to, _, next) => {
const isAuth = !!getAuth().currentUser;
const isAdmin = useAuth.admin;
console.log(isAdmin)
if (to.meta.onlyAuthUser) {
if (isAuth) {
next()
} else {
next({ name: "Login" })
}
// } else if(to.meta.onlyAdminUser) {
//     if(isAdmin) {
//         next()
//     }
//     else {
//         next({name: "BasicUser"})
//     }
} else if (to.meta.onlyGuestUser) {
if (isAuth) {
next({ name: "Dashboard" })
} else {
next()
}
} else {
next()
}
})
export default {
setup() {
return {
...useAuth()
}
},
...router
}

useAuth代码：

import { useStore } from 'vuex'
import { computed } from 'vue'
export default function useAuth() {
const store = useStore();
const { state } = store;
const error = computed(() => state.user.auth.error);
const isProcessing = computed(() => state.user.auth.isProcessing);
const isAuthenticated = computed(() => store.getters["user/isAuthenticated"]);
const user = computed(() => state.user.data);
const admin = computed(() => state.user.data.admin);
return {
error,
isProcessing,
isAuthenticated,
user,
admin
}
}

Answer 1

vue路由器的索引文件不像vue组件文件，也没有setup((函数。我从未尝试过，但也不太可能使用可组合函数，尤其是当使用像computed()这样的vue-composition API函数时

但是，您可以导入vuex存储并访问它的所有状态、getter等。

import store from '/store/index.js'; // or wherever your store lives

然后进入你的路由器防护

const isAuthenticated = store.getters["user/isAuthenticated"];
const isProcessing = store.state.user.auth.isProcessing
// ...etc