跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客我的书GitHub 精选镜像AI 生图工具UI配色美学关于
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
JavaScript

微搭低代码:手机号登录与RBAC路由控制

基于微搭云开发的手机号验证码登录,获取用户手机号后在门户页查询用户信息、部门、岗位和角色,构造全局用户对象。通过角色编码的数组包含校验控制不同工作台入口的访问权限,实现轻量级RBAC路由控制。认证交由平台处理,业务层仅关注授权逻辑,代码简洁且安全可控。

LinuxPan发布于 2026/6/12更新于 2026/8/1715 浏览
微搭低代码:手机号登录与RBAC路由控制

系统骨架和角色权限已经就绪,这一节直接把登录鉴权闭环打通。为了方便,直接启用云开发的手机号验证码登录——用户通过认证进入门户页后,我们再根据手机号拉取组织架构和权限信息,然后按角色控制不同工作台的入口。

[图片]

数据模型与变量

只列出本节直接相关的表,部门和岗位等其他表前面已经建好。

1. Users 表(用户信息表)

核心字段标识类型说明
姓名 / 手机号name / phone单行文本手机号与云开发认证绑定的唯一标识
部门 / 岗位dept_id / post_id关联关系关联 Departments 和 Posts 表
最后登录last_login日期时间门户初始化时自动更新

2. UserRoles 表(用户 - 角色关联表) 多对多映射:包含 user_id(关联 Users 表)和 role_id(关联 Roles 表)。

在首页中创建两个全局变量:currentUser(存储用户基础信息及部门、岗位)和 userRoles(存储角色编码集合),初始值分别是空对象和空数组。

[图片]

[图片]

门户初始化:构造 User 对象

云开发已经拦截了未登录用户,所以能进到门户页就说明手机号验证通过了。在全局方法 login 里完成剩下的工作。

[图片]

export default async function login({ event, data }) {
  try {
    $w.utils.showLoading({ title: '加载工作台中...' });
    // 1. 从云开发原生 auth 对象获取当前手机号
    const phone = $w.auth.currentUser?.phone || "15155667788";
    if (!phone) {
      return $w.utils.showToast({ title: '获取授权信息失败,请重新登录', icon: 'error' });
    }
    // 2. 根据手机号查用户信息(带关联部门、岗位)
    const userRes = await $w.cloud.callDataSource({
      dataSourceName: 'MBA_Users',
      methodName: 'wedaGetRecordsV2',
      params: {
        filter: { where: { phone: { $eq: phone } } },
        select: { $master: true, department_id: true, position_id: true }
      }
    });
    if (!userRes.records.length) {
      return $w.utils.showToast({ title: '该手机号未在系统中注册,请联系管理员', icon: 'error' });
    }
    const user = userRes.records[0];
    console.log("user", user);
    // 3. 异步更新最后登录时间,不阻塞后续流程
    $w.cloud.callDataSource({
      dataSourceName: 'MBA_Users',
      methodName: 'wedaUpdateV2',
      params: {
        data: { last_login: Date.now() },
        filter: { where: { _id: { $eq: user._id } } }
      }
    }).catch(e => console.error('更新登录时间失败', e));
    // 4. 获取用户关联的角色
    const roleRes = await $w.cloud.callDataSource({
      dataSourceName: 'MBA_RoleUsers',
      methodName: 'wedaGetRecordsV2',
      params: {
        filter: { where: { user_id: { $eq: user._id } } },
        select: { $master: true, role_id: true }
      }
    });
    console.log("roleRes", roleRes);
    // 提取角色编码,如 ['ROLE_ADMIN', 'ROLE_TEACHER']
    const roleCodes = roleRes.records.map(item => item.role_id?.code).filter(Boolean);
    console.log("roleCodes", roleCodes);
    // 5. 构造全局用户对象并写入页面状态
    const userInfo = { ...user, deptInfo: user.department_id, postInfo: user.position_id };
    $w.app.dataset.state.currentUser = userInfo;
    $w.app.dataset.state.userRoles = roleCodes;
  } catch (e) {
    console.error('初始化门户失败', e);
    $w.utils.showToast({ title: '系统加载失败,请刷新重试', icon: 'error' });
  } finally {
    $w.utils.hideLoading();
  }
}

选中页面组件的 onShow 事件,调用这个 login 方法。

[图片]

路由控制:卡片跳转与拦截

门户页放置了不同工作台的入口卡片,点击时统一用下面的函数分发——根据传入的 data.target 检查 userRoles 里有没有对应角色,有就跳转,没有就提示。

export default function ({ event, data }) {
  const userRoles = $w.app.dataset.state.userRoles || [];
  const targetPortal = data.target;
  
  const portalConfig = {
    admin: { requiredRoles: ['ROLE_SUPER_ADMIN', 'ROLE_ADMIN'], pageId: 'u_bu_men_guan_li' },
    employee: { requiredRoles: ['ROLE_USER', 'ROLE_DEPT_MANAGER'], pageId: 'employee-dashboard' },
    teacher: { requiredRoles: ['ROLE_TEACHER'], pageId: 'teacher-dashboard' },
    student: { requiredRoles: ['ROLE_STUDENT'], pageId: 'student-app' }
  };
  const config = portalConfig[targetPortal];
  console.log("config", config);
  
  if (!config) {
    return $w.utils.showToast({ title: '无效的工作台入口', icon: 'error' });
  }
  
  const hasPermission = config.requiredRoles.some(role => userRoles.includes(role));
  if (!hasPermission) {
    return $w.utils.showToast({ title: '您没有该工作台的访问权限', icon: 'error' });
  }
  
  $w.utils.reLaunch({ pageId: config.pageId });
}

管理员入口的按钮绑定这个事件,传入 admin。

[图片]

认证部分完全由云开发接过去,业务层只做一次数据聚合拿到完整用户信息,再用角色编码做简单的包含判断,就实现了基于角色的入口控制。下一步进入具体工作台内部,处理业务数据流转。

目录

  1. 数据模型与变量
  2. 门户初始化:构造 User 对象
  3. 路由控制:卡片跳转与拦截
  • 免费图片AI生成工具免费生成了解详情
  • Magick API 一键接入全球大模型注册送1000万token查看
  • 免费图片视频在线生成30秒,将你的创意变成现实开始设计
  • X/Twitter免费视频下载器免登陆无限额度免费视频解析下载了解详情
  • 100+免费在线小游戏爽一把
极客日志微信公众号二维码

微信扫一扫,关注极客日志

微信公众号「极客日志V2」,在微信中扫描左侧二维码关注。展示文案:极客日志V2 zeeklog

更多推荐文章

查看全部
  • 渗透测试思路总结
  • Android PopupMenu 弹出菜单实现方法
  • 2025 年 12 款 AI 写小说工具实测与优劣对比
  • LLM 大模型基础知识与核心概念详解
  • Bugku Web 挑战:Shell 与成绩查询漏洞分析
  • 基于 Coze 平台构建企业级 AI 客服机器人的实战指南
  • 2025 中秋月相计算与月球数据可视化实战
  • Python Flask 校园拍卖系统设计与实现
  • 基于 AI 辅助开发的高并发在线考试系统实践
  • DeepSeek-R1-Distill-Llama-8B Python 爬虫实战:智能数据采集与清洗
  • 网络安全入门核心知识体系与学习路径指南
  • iOS TableView 的两种系统样式
  • C++ 继承入门:从基础概念定义到默认成员函数
  • Dify 与 MySQL 深度融合:基于 MCP 协议的数据交互实践
  • MedGemma-1.5-4B 医学影像多模态理解实战与 Web 集成
  • Qwen3-VL 模型架构与训练流程
  • 中小团队低成本搭建项目管理系统:Ubuntu 下 Dootask 私有化部署实战
  • 在 Cursor 中配置并使用 MCP 服务实战指南
  • Prompt 编写实战:日志分析与关键字聚类技巧
  • 无人机红外照片处理中的温度校准与精度优化策略

相关免费在线工具

  • Keycode 信息

    查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具,Keycode 信息在线工具,online

  • Escape 与 Native 编解码

    JavaScript 字符串转义/反转义;Java 风格 \uXXXX(Native2Ascii)编码与解码。 在线工具,Escape 与 Native 编解码在线工具,online

  • JavaScript / HTML 格式化

    使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具,JavaScript / HTML 格式化在线工具,online

  • JavaScript 压缩与混淆

    Terser 压缩、变量名混淆,或 javascript-obfuscator 高强度混淆(体积会增大)。 在线工具,JavaScript 压缩与混淆在线工具,online

  • Base64 字符串编码/解码

    将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online

  • Base64 文件转换器

    将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online