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

总结

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

相关推荐
菜鸟una2 小时前
【瀑布流大全】分析原理及实现方式(微信小程序和网页都适用)
前端·css·vue.js·微信小程序·小程序·typescript
2501_915106325 小时前
iOS 混淆与 IPA 加固全流程,多工具组合实现无源码混淆、源码防护与可审计流水线(iOS 混淆|IPA 加固|无源码加固|App 防反编译)
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者85 小时前
用多工具组合把 iOS 混淆做成可复用的工程能力(iOS混淆 IPA加固 无源码混淆 Ipa Guard)
android·ios·小程序·https·uni-app·iphone·webview
lypzcgf6 小时前
商城小程序数据库表结构文档
数据库·小程序·电商
2501_915921437 小时前
掌握 iOS 26 App 性能监控,从监测到优化的多工具组合流程
android·macos·ios·小程序·uni-app·cocoa·iphone
知识分享小能手7 小时前
uni-app 入门学习教程,从入门到精通, uni-app常用API的详细语法知识点(上)(5)
前端·javascript·vue.js·学习·微信小程序·小程序·uni-app
一匹电信狗8 小时前
【C++】手搓AVL树
服务器·c++·算法·leetcode·小程序·stl·visual studio
2501_916008898 小时前
手机 iOS 系统全解析,生态优势、开发机制与跨平台应用上架实践指南
android·ios·智能手机·小程序·uni-app·iphone·webview