Vue Router中使用组合式API获取用户数据遇阻

你的核心问题出在组合式函数的使用场景错误以及Router实例的导出方式不符合规范，导致无法正确获取admin状态。

问题根源 #

1. useAuth调用方式错误：useAuth是一个组合式函数，必须在组件的setup函数或其他组合式函数内部调用（因为它依赖useStore，而useStore需要Vue的注入上下文）。你在router.beforeEach中直接访问useAuth.admin，既没有调用函数，也脱离了Vue的上下文，自然拿不到数据。
2. Router导出方式错误：Vue Router的实例不需要包裹在setup里导出，你混合导出的写法完全不符合规范，会导致Router功能异常。

修复步骤 #

1. 直接导入Vuex Store实例 #

在路由文件中直接导入你创建的Vuex Store实例，替代组合式函数的调用，因为路由守卫不属于组件上下文，无法使用useStore。

2. 修改路由守卫逻辑 #

直接从Store中读取用户状态，注意处理user.data可能为null的情况，避免报错。

3. 修正Router导出方式 #

直接导出createRouter创建的实例即可，不需要额外的setup包裹。

修改后的完整路由代码 #

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 store from "../store"; // 直接导入你的Vuex Store实例

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;
    // 直接从Store读取用户数据，处理user.data为null的边界情况
    const user = store.state.user.data;
    const isAdmin = user?.admin || false;
    console.log(isAdmin)

    if (to.meta.onlyAuthUser) {
        isAuth ? next() : next({ name: "Login" });
    } else if (to.meta.onlyAdminUser) {
        // 同时校验登录状态和管理员权限
        if (isAuth && isAdmin) {
            next();
        } else {
            next({ name: "Dashboard" });
        }
    } else if (to.meta.onlyGuestUser) {
        isAuth ? next({ name: "Dashboard" }) : next();
    } else {
        next();
    }
})

// 直接导出Router实例
export default router;

优化建议（可选） #

为了更符合Vuex的最佳实践，建议在用户模块的getters中添加isAdmin计算属性，避免直接访问state：

// store/modules/user.js
export default {
    state: {
        data: null,
        auth: {
            error: null,
            isProcessing: false
        }
    },
    getters: {
        isAuthenticated: (state) => !!state.data,
        isAdmin: (state) => state.data?.admin || false
    },
    // ...其他mutations、actions
}

之后在路由守卫中可以直接调用getter：

const isAdmin = store.getters["user/isAdmin"];

内容的提问来源于stack exchange，提问作者Silky