点餐小程序实战教程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" },
    });
  }
}

总结

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

相关推荐
HerayChen2 小时前
微信小程序混合 h5 wx.miniProgram是 undefined
微信小程序·小程序·h5
耶啵奶膘6 小时前
uniapp+vue2全局监听退出小程序清除缓存
小程序·uni-app
中云DDoS CC防护蔡蔡9 小时前
微信小程序被攻击怎么选择高防产品
服务器·网络安全·微信小程序·小程序·ddos
井眼12 小时前
微信小程序-prettier 格式化
微信小程序·小程序
wqq_99225027715 小时前
springboot基于微信小程序的食堂预约点餐系统
数据库·微信小程序·小程序
2401_8827275716 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架
licy__21 小时前
微信小程序登录注册页面设计(小程序项目)
微信小程序·小程序
说私域2 天前
基于“开源 2+1 链动模式 S2B2C 商城小程序”的社区团购运作主体特征分析
大数据·人工智能·小程序
HUODUNYUN2 天前
小程序免备案:快速部署与优化的全攻略
服务器·网络·web安全·小程序·1024程序员节
guanpinkeji2 天前
二手手机回收小程序,一键便捷高效回收
微信小程序·小程序·软件开发·手机回收小程序·二手手机回收