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

news2024/9/24 21:24:56

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" },
    });
  }
}