Nuxt+Firebase Firestore基于角色的页面访问权限控制实现咨询

方案可行性确认 #

你构思的实现方案完全可行，无需依赖Cloud Functions即可满足你的两个核心需求。 #

具体实现步骤 #

步骤1：Firestore用户角色字段存储配置 #

1. 首先约定Firestore集合结构：创建名为users的集合，集合内每条文档的ID使用Firebase Auth生成的用户UID，文档内固定存储userType字段，取值为subcontractor/contractor/worker三个枚举值。
2. 注册用户时同步写入角色字段，示例代码如下：

// 注册逻辑示例
import { createUserWithEmailAndPassword } from "firebase/auth";
import { doc, setDoc } from "firebase/firestore";
import { auth, db } from "~/plugins/firebase";

async function register(email, password, userType) {
  const userCredential = await createUserWithEmailAndPassword(auth, email, password);
  const user = userCredential.user;
  // 写入用户角色到Firestore
  await setDoc(doc(db, "users", user.uid), {
    email: email,
    userType: userType,
    // 其他自定义用户字段
  });
}

3. 配置Firestore安全规则，避免用户自行修改角色字段，规则示例：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /users/{userId} {
      // 仅用户本人可读取自己的用户文档
      allow read: if request.auth != null && request.auth.uid == userId;
      // 仅用户本人可修改自己的文档，且禁止修改userType字段
      allow write: if request.auth != null && request.auth.uid == userId 
        && (!("userType" in request.resource.data) || request.resource.data.userType == resource.data.userType);
    }
  }
}

步骤2：Nuxt角色校验中间件编写 #

以下示例基于Nuxt 3，Nuxt 2写法逻辑一致仅API有差异：

1. 在项目middleware目录下新建isSubcontractor.js文件：

// middleware/isSubcontractor.js
import { auth, db } from "~/plugins/firebase";
import { doc, getDoc } from "firebase/firestore";

export default defineNuxtRouteMiddleware(async (to, from) => {
  // 未登录直接跳转到登录页
  if (!auth.currentUser) {
    return navigateTo('/login');
  }
  // 获取当前用户的角色信息
  const userDoc = await getDoc(doc(db, "users", auth.currentUser.uid));
  if (!userDoc.exists() || userDoc.data().userType !== 'subcontractor') {
    // 角色不匹配跳转到403页或者登录页
    return navigateTo('/403');
  }
})

2. 按照同样逻辑新建isContractor.js和isWorker.js，仅修改校验的userType取值即可。
3. 在对应角色的页面中绑定中间件，例如分包商专属页面在页面头部添加配置：

// pages/subcontractor/index.vue
definePageMeta({
  middleware: ['isSubcontractor']
})

登录后自动跳转实现 #

登录成功后获取用户角色，直接跳转对应路径即可，示例代码：

// 登录逻辑示例
import { signInWithEmailAndPassword } from "firebase/auth";
import { doc, getDoc } from "firebase/firestore";
import { auth, db } from "~/plugins/firebase";

async function login(email, password) {
  const userCredential = await signInWithEmailAndPassword(auth, email, password);
  const user = userCredential.user;
  const userDoc = await getDoc(doc(db, "users", user.uid));
  const userType = userDoc.data().userType;
  // 按角色跳转对应路径
  await navigateTo(`/${userType}`);
}

注意事项 #

所有客户端侧的校验都必须配合Firestore安全规则使用，避免用户通过调试工具绕过前端校验访问受限资源。 #

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