Vue3+Firebase v9分级用户授权与页面安全访问方案咨询

核心参考内容（均为对应技术栈官方内置能力，直接查官方对应模块文档即可） #

• Firebase Auth模块的Custom Claims（自定义声明）能力：是整个权限体系的信任根，权限字段存在Firebase签发的JWT令牌中，前端无法篡改
• Vue Router 4 全局前置守卫、路由meta元信息配置：前端路由拦截的核心能力
• Vuex 4 状态初始化流程：用于缓存当前用户身份、权限等级，避免重复请求
• Firebase Hosting 重写规则配置：解决托管后前端子路由刷新404问题
• Firestore Security Rules/Cloud Functions 权限校验规则：后端层面防越权的核心

完整实现步骤 #

1. 权限源头配置
   不要把用户角色存在Firestore用户文档、前端本地存储里作为判定依据，直接通过Firebase Admin SDK给用户配置Custom Claims，比如设置role字段，枚举值按业务设为super_admin/editor/viewer三个等级，这个字段会直接写入用户登录后拿到的ID令牌，服务端、前端都从令牌里读角色值。

2. Vuex 权限状态管理
   直接复用以下逻辑，初始化应用时拉取用户身份和角色，加初始化完成标记避免刷新误跳转：

// store/modules/auth.js
import { getAuth, onAuthStateChanged, getIdTokenResult } from "firebase/auth";

export default {
  state: () => ({
    currentUser: null,
    userRole: null,
    authInitialized: false
  }),
  mutations: {
    SET_USER(state, payload) {
      state.currentUser = payload;
    },
    SET_USER_ROLE(state, payload) {
      state.userRole = payload;
    },
    SET_AUTH_INITIALIZED(state, payload) {
      state.authInitialized = payload;
    }
  },
  actions: {
    async initAuthState({ commit }) {
      const auth = getAuth();
      return new Promise(resolve => {
        onAuthStateChanged(auth, async (user) => {
          if (user) {
            commit('SET_USER', user);
            // 强制从令牌读取角色，不信任本地缓存
            const tokenResult = await getIdTokenResult(user);
            commit('SET_USER_ROLE', tokenResult.claims.role || 'viewer');
          } else {
            commit('SET_USER', null);
            commit('SET_USER_ROLE', null);
          }
          commit('SET_AUTH_INITIALIZED', true);
          resolve();
        })
      })
    }
  }
}

3. 路由表配置
   给每个路由加meta标记，写明是否需要登录、允许访问的角色列表：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import store from '../store';

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/Login.vue'),
    meta: { requireAuth: false }
  },
  {
    path: '/admin',
    name: 'AdminDashboard',
    component: () => import('../views/AdminDashboard.vue'),
    meta: { requireAuth: true, allowedRoles: ['super_admin'] }
  },
  {
    path: '/workspace',
    name: 'EditorWorkspace',
    component: () => import('../views/EditorWorkspace.vue'),
    meta: { requireAuth: true, allowedRoles: ['super_admin', 'editor'] }
  },
  {
    path: '/home',
    name: 'ViewerHome',
    component: () => import('../views/ViewerHome.vue'),
    meta: { requireAuth: true, allowedRoles: ['super_admin', 'editor', 'viewer'] }
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

4. 全局路由拦截&自动跳转
   统一在全局前置守卫做权限判定，不要分散写路由独享守卫、组件内守卫，避免漏配：

// 路由角色跳转映射，统一维护
const roleDefaultPath = {
  'super_admin': '/admin',
  'editor': '/workspace',
  'viewer': '/home'
};

router.beforeEach(async (to, from, next) => {
  // 等权限初始化完成再做判定，解决刷新跳登录的问题
  if (!store.state.auth.authInitialized) {
    await store.dispatch('initAuthState');
  }

  const { currentUser, userRole } = store.state.auth;
  const { requireAuth, allowedRoles } = to.meta;

  // 免登录页面处理
  if (!requireAuth) {
    // 已登录用户访问登录页，直接按角色跳对应首页
    if (currentUser) return next(roleDefaultPath[userRole]);
    return next();
  }

  // 需登录页面，未登录直接跳登录页
  if (!currentUser) return next('/login');

  // 角色校验，越权直接重定向到对应角色默认页，不要弹无权限提示，减少路由结构泄露
  if (!allowedRoles.includes(userRole)) {
    return next(roleDefaultPath[userRole]);
  }

  next();
});

export default router;

防越权最佳实践 #

• 永远不要信任前端的权限判定：前端路由拦截只是提升用户体验的手段，防不住恶意用户篡改本地代码、直接调接口的行为，所有Firestore读写、Cloud Functions接口必须在服务端单独做权限校验：Firestore安全规则直接读request.auth.token.role判定角色，Cloud Functions拿到用户ID令牌后解码校验角色，不符合权限的请求直接拒绝
• 角色变更后强制刷新令牌：给用户调整角色后，前端要调用getAuth().currentUser.getIdToken(true)强制拉取最新令牌，否则默认要等1小时令牌过期后才会同步新权限
• Firebase Hosting配置重写规则：所有路径请求都重定向到index.html，避免用户直接输入子路由地址触发404，配置示例：

{
  "hosting": {
    "public": "dist",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

• 低权限用户的界面上直接隐藏高权限入口，不要做可见但点不开的按钮，减少不必要的试探
• 不要给越权访问返回403状态码，直接302重定向到用户有权限的首页，降低攻击者探测路由权限规则的效率
• 不要引入多余的第三方权限库，Firebase自带的Custom Claims + Vue Router全局守卫完全能覆盖绝大多数多等级权限场景，多装依赖反而多一层出问题的可能

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