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

总结

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

相关推荐
中杯可乐多加冰1 小时前
无代码开发实践|基于业务流能力快速开发市场监管系统,实现投诉处理快速响应
人工智能·低代码
尘似鹤2 小时前
微信小程序学习(六)--多媒体操作
学习·微信小程序·小程序
2501_916008893 小时前
iOS 26 性能分析深度指南 包含帧率、渲染、资源瓶颈与 KeyMob 协助策略
android·macos·ios·小程序·uni-app·cocoa·iphone
流***陌3 小时前
线上教学小程序:构建高效互动的云端学习空间
学习·小程序
源码_V_saaskw3 小时前
JAVA校园跑腿校园外卖源码校园外卖小程序校园代买帮忙外卖源码社区外卖源码小程序+公众号+h5
java·开发语言·微信小程序·小程序
源码哥_博纳软云4 小时前
JAVA同城预约服务家政服务美容美发洗车保洁搬家维修家装系统源码小程序+公众号+h5
java·开发语言·微信小程序·小程序
NocoBase7 小时前
俄罗斯合作伙伴 Mobx,用 NocoBase 交付多场景方案
低代码·开源·资讯
流***陌8 小时前
淘宝一番赏抽赏小程序:开启趣味抽赏新体验
小程序
说私域8 小时前
开源链动2+1模式AI智能名片S2B2C商城小程序在竞争激烈的中低端面膜服装行业中的应用与策略
大数据·人工智能·小程序
陈陈小白9 小时前
小程序如何接入火山引擎埋点数据
小程序·火山引擎