我们已经实现了员工的注册及登录功能,登录成功后需要跳转到我们的员工首页。在首页加载的时候我们需要去验证当前用户是否已经登录,未登录我就跳转到登录页面。
1 创建员工的全局变量
员工登录成功后需要将信息写入全局变量中,打开我们的应用编辑器,在代码区新建全局变量employee,类型选择对象
如果用户登录之后,我们希望下次就直接进入系统了,不需要再次输入用户名和密码。这样我们可以打开本地持久化
2 创建员工首页
登录成功后我们希望跳转到员工首页,新建一个页面
3 跳转到员工首页
登录成功后,我们需要重定向到员工首页。这里选择重定向而不是选择跳转,是因为重定向之后目前页面就只留下了首页。如果是跳转,用户还可以点击返回返回到上一页
在我们的登录逻辑里增加重定向的方法
$w.utils.redirectTo({
pageId: "home", // 页面 Id
packageName: "", // 主应用为空或不填,子模块填写 子包目录,查找位置 子包编辑器 --- 页面 --- 子包目录
params: { key: "value" },
});
需要修改一下pageId,pageId需要从页面列表找到对应的页面,复制页面ID
替换后的代码
$w.utils.redirectTo({
pageId: "u_yuan_gong_shou_ye", // 页面 Id
packageName: "", // 主应用为空或不填,子模块填写 子包目录,查找位置 子包编辑器 --- 页面 --- 子包目录
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", // 页面 Id
packageName: "", // 主应用为空或不填,子模块填写 子包目录,查找位置 子包编辑器 --- 页面 --- 子包目录
params: { key: "value" },
});
return;
}
}
选中页面组件,设置onShow方法,调用我们的自定义方法
6 登录的完整代码
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" },
});
}
}
总结
我们本篇介绍了登录时页面跳转,以及权限验证的过程。微搭中不像我们传统方案里可以在过滤器里进行权限验证,本身还是比较简单的。但是有验证要好一些,否则对方得到你的页面地址你的管理页面就可以未经授权被访问,安全性就要差一些。