点餐小程序实战教程10权限验证

文摘   2024-09-16 08:00   内蒙古  

我们已经实现了员工的注册及登录功能,登录成功后需要跳转到我们的员工首页。在首页加载的时候我们需要去验证当前用户是否已经登录,未登录我就跳转到登录页面。

1 创建员工的全局变量

员工登录成功后需要将信息写入全局变量中,打开我们的应用编辑器,在代码区新建全局变量employee,类型选择对象

如果用户登录之后,我们希望下次就直接进入系统了,不需要再次输入用户名和密码。这样我们可以打开本地持久化

2 创建员工首页

登录成功后我们希望跳转到员工首页,新建一个页面

3 跳转到员工首页

登录成功后,我们需要重定向到员工首页。这里选择重定向而不是选择跳转,是因为重定向之后目前页面就只留下了首页。如果是跳转,用户还可以点击返回返回到上一页

在我们的登录逻辑里增加重定向的方法

$w.utils.redirectTo({  pageId: "home", // 页面 Id  packageName: "", // 主应用为空或不填,子模块填写 子包目录,查找位置 子包编辑器 --- 页面 --- 子包目录  params: { key: "value" },});

需要修改一下pageId,pageId需要从页面列表找到对应的页面,复制页面ID

替换后的代码

$w.utils.redirectTo({      pageId: "u_yuan_gong_shou_ye", // 页面 Id      packageName: "", // 主应用为空或不填,子模块填写 子包目录,查找位置 子包编辑器 --- 页面 --- 子包目录      params: { key: "value" },    });

4 给全局变量赋值

在我们登录成功后需要先将用户信息赋值给全局变量,赋值的时候先需要粘贴全局变量的路径

在我们的登录逻辑里增加赋值语句

$w.app.dataset.state.employee = result.data

5 验证权限

我们的员工首页在加载完毕后,需要验证一下用户是否有权限访问。验证的逻辑是看全局变量的employee是否有值,有值我们就认为登录了,没有的话我们就重定向回登录页

切换到员工首页,在代码区新建一个javascript方法

输入如下代码



export default function ({ event, data }) { const userInfo = $w.app.dataset.state.employee;

// 检查用户是否已登录,判断userInfo是否为空对象 if (!userInfo || Object.keys(userInfo).length === 0) { $w.utils.showToast({ title: "请先登录", icon: "error", duration: 1000 });

// 跳转回登录页面 $w.utils.redirectTo({ pageId: "u_yuan_gong_deng_lu", // 页面 Id packageName: "", // 主应用为空或不填,子模块填写 子包目录,查找位置 子包编辑器 --- 页面 --- 子包目录 params: { key: "value" }, }); return; }}

选中页面组件,设置onShow方法,调用我们的自定义方法

6 登录的完整代码

export default async function ({ event, data }) {  const phone = $w.input1.value  const password = $w.input2.value  const agree = $w.radio1.value  if (!agree) {    $w.utils.showToast({      title: "请先同意用户协议",      icon: "error",      duration: 1000    })    return  }  const result = await $w.cloud.callDataSource({    dataSourceName: 'userManager_ssztgij',    methodName: 'employeeLogin',    params: { phone: phone, password: password },  });  if (result.code == 1) {    $w.utils.showToast({      title: result.message || "登录失败",      icon: "error",      duration: 1000    })    return  } else if (result.code == 0) {    $w.utils.showToast({      title: result.message || "登录成功",      icon: "success",      duration: 1000    })    $w.app.dataset.state.employee = result.data    $w.utils.redirectTo({      pageId: "u_yuan_gong_shou_ye", // 页面 Id      packageName: "", // 主应用为空或不填,子模块填写 子包目录,查找位置 子包编辑器 --- 页面 --- 子包目录      params: { key: "value" },    });  }}

总结

我们本篇介绍了登录时页面跳转,以及权限验证的过程。微搭中不像我们传统方案里可以在过滤器里进行权限验证,本身还是比较简单的。但是有验证要好一些,否则对方得到你的页面地址你的管理页面就可以未经授权被访问,安全性就要差一些。


低代码布道师
分享微搭低代码使用教程,提问交流+知识星球50556232
 最新文章