第33讲 Gin登录返回JSON，前端判断跳转
本讲基于视频实际讲解内容整理
一、本讲概述
前面的登录是"表单提交 → 服务器直接 Redirect 跳转"。本讲换一种更常见的前后端分离做法：登录接口只返回 JSON 结果（成功/失败、消息、跳转地址），由前端 JS 决定跳转到哪里。这样接口更通用，也方便做 AJAX 无刷新登录。
二、传统跳转 vs JSON 返回
2.1 传统方式（服务器跳转）
Go
// 服务器直接决定去向
c.Redirect(302, "/")
缺点：前端无法灵活处理"登录失败弹提示""不同角色跳不同页面"等逻辑。
2.2 JSON 方式（前端决定跳转）
Go
// 服务器只返回结果，不跳转
c.JSON(200, gin.H{
"code": 200,
"msg": "登录成功",
"data": gin.H{"redirect": "/"},
})
老师说明：把"跳到哪里"交给前端，服务器只负责告诉它"成没成功、该跳哪"。这就是前后端分离的典型思路。
三、后端：返回统一的登录结果
3.1 登录接口返回 JSON
Go
func Login(c *gin.Context) {
username := c.PostForm("username")
password := c.PostForm("password")
if username == "" || password == "" {
c.JSON(200, gin.H{
"code": 400,
"msg": "用户名或密码不能为空",
})
return
}
// 假设校验通过
session := sessions.Default(c)
session.Set("username", username)
session.Save()
c.JSON(200, gin.H{
"code": 200,
"msg": "登录成功",
"data": gin.H{"redirect": "/"},
})
}
老师强调：即使登录失败也返回
200状态码（HTTP 层面成功），用业务字段code表示业务成败。这样前端统一处理，不会因为 HTTP 400 而进错误回调。
3.2 配合返回封装（预告）
返回结构里总有 code / msg / data，这正是第38讲要讲的统一返回封装。本讲先手写，后面会抽成通用函数。
四、前端：根据 JSON 跳转
4.1 用 fetch 提交并跳转
HTML
<form id="loginForm">
用户名：<input name="username">
密码：<input type="password" name="password">
<button type="submit">登录</button>
</form>
<script>
document.getElementById("loginForm").onsubmit = async function (e) {
e.preventDefault(); // 阻止表单默认提交刷新
const formData = new FormData(this);
const res = await fetch("/login", {
method: "POST",
body: formData,
});
const result = await res.json();
if (result.code === 200) {
// 登录成功，跳转到后端给的地址
window.location.href = result.data.redirect;
} else {
// 登录失败，前端弹提示
alert(result.msg);
}
};
</script>
关键点：
e.preventDefault()阻止页面刷新；用fetch发 AJAX；拿到 JSON 后根据result.code判断，成功才window.location.href跳转。
4.2 不同角色跳不同页（进阶）
JavaScript
if (result.code === 200) {
if (result.data.role === "admin") {
window.location.href = "/admin";
} else {
window.location.href = result.data.redirect;
}
}
五、本讲小结
| 知识点 | 要点 |
|---|---|
| 服务器职责 | 只返回 JSON 结果（code/msg/data） |
| 前端职责 | 根据 JSON 决定跳转或提示 |
| 状态码习惯 | 业务成败用 code 区分，HTTP 仍 200 |
| 阻止刷新 | e.preventDefault() |
| 发起请求 | fetch + FormData |
| 跳转 | window.location.href = result.data.redirect |
六、课后练习
- 把
Login改成返回 JSON（含code、msg、data.redirect） - 用
fetch提交登录表单，阻止默认刷新 - 登录成功时跳转到首页，失败时
alert提示 - 给返回结果加上
role字段，前端根据其值跳不同页面 - 在登录失败时，把后端返回的
msg显示到页面的错误区域（而非 alert） - 思考：JSON 返回方式和传统 Redirect 方式，分别适合什么场景？