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

目录

  • [1 创建员工的全局变量](#1 创建员工的全局变量)
  • [2 创建员工首页](#2 创建员工首页)
  • [3 跳转到员工首页](#3 跳转到员工首页)
  • [4 给全局变量赋值](#4 给全局变量赋值)
  • [5 验证权限](#5 验证权限)
  • [6 登录的完整代码](#6 登录的完整代码)
  • 总结

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

1 创建员工的全局变量

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


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

2 创建员工首页

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

3 跳转到员工首页

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

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

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

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

替换后的代码

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

4 给全局变量赋值

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

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

bash 复制代码
$w.app.dataset.state.employee = result.data

5 验证权限

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

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

输入如下代码

bash 复制代码
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 登录的完整代码

bash 复制代码
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" },
    });
  }
}

总结

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

相关推荐
尚梦5 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
BPM_宏天低代码8 小时前
低代码 BPA:简化业务流程自动化的新趋势
运维·低代码·自动化
paopaokaka_luck9 小时前
基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)
java·spring boot·小程序·毕业设计·mybatis·1024程序员节
Bessie23411 小时前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
蜕变菜鸟11 小时前
小程序跳转另一个小程序
小程序
15 小时前
躺平成长-代码开发,利用kimi开发小程序(09)
小程序
18 小时前
微信小程序运营日记(第四天)
微信小程序·小程序
guanpinkeji18 小时前
旧衣回收小程序:提高回收效率,扩大服务范围
大数据·小程序·团队开发·软件开发·小程序开发·旧衣回收·旧衣回收小程序
说私域20 小时前
完美日记营销模式对开源 AI 智能名片 2 + 1 链动模式 S2B2C 商城小程序的启示
人工智能·小程序
说私域20 小时前
传统媒体终端移动化发展新趋势:融合开源 AI 智能名片与 S2B2C 商城小程序的创新探索
人工智能·小程序·零售