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

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

1 创建员工的全局变量

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



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

2 创建员工首页

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

3 跳转到员工首页

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

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

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

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

替换后的代码

$w.utils.redirectTo({pageId: "u_yuan_gong_shou_ye", // 页面 IdpackageName: "", // 主应用为空或不填，子模块填写 子包目录，查找位置 子包编辑器 --- 页面 --- 子包目录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", // 页面 IdpackageName: "", // 主应用为空或不填，子模块填写 子包目录，查找位置 子包编辑器 --- 页面 --- 子包目录params: { key: "value" },});return;}
}

选中页面组件，设置onShow方法，调用我们的自定义方法

6 登录的完整代码

export default async function ({ event, data }) {const phone = $w.input1.valueconst password = $w.input2.valueconst agree = $w.radio1.valueif (!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", // 页面 IdpackageName: "", // 主应用为空或不填，子模块填写 子包目录，查找位置 子包编辑器 --- 页面 --- 子包目录params: { key: "value" },});}
}

总结

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