微搭低代码MBA培训管理系统07——用户登录
目录
前情回顾与本节目标
在上一讲中，我们完成了页面管理与角色权限的分配。至此，系统的“骨架”和“规则”已经搭建完毕。
本节我们将正式打通用户登录与鉴权闭环。为了最大化提升开发效率，我们将直接启用云开发的“手机号验证码登录”功能。当用户通过身份验证进入门户页时，我们再根据其手机号拉取完整的组织架构和权限信息，实现千人千面的工作台入口控制。
本节核心目标：
- 拥抱云原生认证：基于云开发内置的
$w.auth.currentUser获取已登录用户的手机号。 - 构造全局 User 对象：在门户页初始化时，聚合用户的部门、岗位、角色与权限信息。
- 门户权限路由：根据构建好的 User 对象中的角色信息，动态控制各业务门户的入口可用性及跳转。
第一步：数据与变量准备
为了不偏离核心，这里仅重点列出本节直接相关的核心数据模型。
1.1 数据源配置
确保系统中已存在以下核心表（部门、岗位、角色等表已在前几篇中创建完毕）：
1. Users表（用户信息表）
| 核心字段 | 标识 | 类型 | 说明 |
|---|---|---|---|
| 姓名 / 手机号 | name / phone | 单行文本 | 手机号作为与云开发认证绑定的唯一标识 |
| 部门 / 岗位 | dept_id / post_id | 关联关系 | 关联Departments和Posts表 |
| 最后登录 | last_login | 日期时间 | 门户初始化时自动更新 |
2. UserRoles表（用户-角色关联表）
用于多对多映射：包含 user_id（关联Users表）和 role_id（关联Roles表）。
1.2 门户页变量设置
在首页中创建以下全局变量，用于承载全局数据：
currentUser(对象,{})：存储当前用户基础信息及部门、岗位。userRoles(数组,[])：存储当前用户的角色编码集合，用于判断门户入口权限。
第二步：门户页初始化与 User 对象构造
因为云开发已经帮我们挡住了未登录用户，所以只要能进入门户页，就说明用户已经通过了手机号验证。
在全局中创建登录方法login
/* * 函数里面访问：通过 app.common.[name] 访问这里定义的方法或值 * 函数外面访问：通过 import（如在页面的 handler 引用的例子：import sayHi from '../../common/[name]'） */exportdefaultasyncfunctionlogin({ 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. 构造全局 User 对象并写入页面状态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（如 ‘admin’, ‘teacher’），检查刚才构造的 userRoles 数组中是否包含对应的角色权限。如果有，放行跳转；如果没有，提示拦截。
exportdefaultfunction({ event, data }){// 从页面状态中获取当前用户的角色集合const userRoles = $w.app.dataset.state.userRoles ||[];const targetPortal = data.target;// 从事件入参获取点击的目标工作台// 定义门户跳转配置：映射目标门户、需要校验的角色编码、跳转页面IDconst 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入参
总结
通过拥抱原生云开发的能力，我们用极少的代码实现了强大且安全的用户入口控制：
- 认证分离：将基础的身份验证（手机号/验证码）交由云开发底层处理，极大减轻了前端页面的开发负担。
- 数据聚合：在门户初始化时，一次性拼装好包含部门、岗位、角色的完整
User对象，做到“一次查询，全局复用”。 - 基于角色的路由控制（RBAC）：通过提取用户的角色编码，在点击跳转时进行极简的数组包含校验，轻松实现越权拦截。
系统的“大门”现已完全敞开且安全可控。下一步，我们将进入具体的工作台内部，实现核心的业务数据流转。
