登录页面需在按钮点击后调用uni.request发送用户名密码,成功响应后用uni.setstoragesync同步存储token并跳转;注册页面应将uni.navigateto放入uni.showtoast的success回调中确保提示显示完毕再跳转;登录态判断须校验token存在且长度合理,并结合后端401状态码二次确认。

直接用 uni.request 调后端接口 + uni.setStorageSync 存 token 就能跑通最简登录注册流程,不需要额外插件或云服务。
登录页面怎么发请求并存 token
登录本质就是 POST 用户名密码到后端,拿到成功响应后把 token 本地存起来。关键不是“怎么写界面”,而是请求时机和缓存逻辑是否可靠:
-
uni.request必须在用户点击按钮后触发,不能在onLoad里自动调;否则页面一打开就发请求,体验差还可能被拦截 - 后端返回的字段名要和前端代码严格一致,比如后端返回
{ "token": "xxx" },你就不能写成res.data.accessToken - 存 token 一定要用
uni.setStorageSync,而不是uni.setStorage(异步),否则跳转首页时可能还没存完就取不到 - 如果后端要求带 header(如
Content-Type: application/json),必须显式声明,uni-app 默认不设
示例片段:
uni.request({
url: 'https://api.example.com/login',
method: 'POST',
data: {
username: this.form.username,
password: this.form.password
},
header: { 'Content-Type': 'application/json' },
success: (res) => {
if (res.statusCode === 200 && res.data.token) {
uni.setStorageSync('token', res.data.token);
uni.navigateTo({ url: '/pages/index/index' });
}
}
});
注册页面怎么避免跳转太快导致提示没显示
注册成功后调 uni.showToast 再跳转,但如果不控制时序,toast 可能刚弹出就切走了——这不是 bug,是默认行为。根本解法不是加 setTimeout,而是用 toast 的 success 回调:
-
uni.showToast的success回调只在 toast 动画结束、视觉上已稳定显示后才触发 - 把
uni.navigateTo放进这个回调里,比手动设 1000ms 更可靠,尤其在低端机上 - 别用
fail回调做跳转兜底,它不保证 toast 是否真显示过
示例:
uni.showToast({
title: '注册成功',
duration: 2000,
success: () => {
uni.navigateTo({ url: '/pages/login/login' });
}
});
为什么登录后再次进入页面还要重新判断登录态
因为 uni.getStorageSync('token') 返回的是字符串,空字符串、null、undefined 都会导致逻辑出错。很多人只写 if (token),但 token 是空串时也会走登录成功分支:
- 后端返回 token 字段但值为空(比如
{"token": ""}),前端没校验就直接存了空串 - 用户手动清过 storage,或者 app 升级后旧 key 被删,
getStorageSync返回null,但if (null)是 false,反而安全 - 真正该检查的是
token && token.length > 6(一般 jwt 至少几十位,空串/短串明显异常) - 路由守卫里做判断时,别只依赖 storage,还要结合后端接口返回的 401 状态码做二次确认
token 校验这事,前端能做的只有“初步筛”,真正的登录有效性永远得靠后端接口返回状态码来定。别在 storage 里存一堆冗余字段试图替代服务端鉴权。











