登录退出
登录逻辑实现需要前端、后端一起完成。
登录逻辑
前端页面修改
前端主要是修改 HTML 使 Lay-ui 表单的字段能够一一对上,然后再调整提交接口。
然后需要注意下提交按钮
html
<button
class="layui-btn layui-btn-fluid login"
lay-submit
lay-filter="login-in"
>
登录
</button>
HTML 事件获取部分是提前弄好的,后续更改的时候只要调整里面的内容即可。
html
<script>
layui.use(["form", "button", "popup"], function () {
var form = layui.form;
var button = layui.button;
var popup = layui.popup;
// 登 录 提 交
form.on("submit(login-in)", function (data) {
/// 验证
/// 登录
/// 动画
button.load({
elem: ".login",
time: 1500,
done: function () {
popup.success("登录成功", function () {
location.href = "./index.html";
});
},
});
return false;
});
});
</script>
前端登录逻辑
js
layui.use(["form", "button", "popup"], function () {
var form = layui.form;
var button = layui.button;
var popup = layui.popup;
var $ = layui.$;
// 登 录 提 交
form.on("submit(login-in)", function (data) {
/// 验证
/// 动画
let btn = button.load({elem: ".login"});
/// 登录
$.ajax({
url: "/api/v1/login",
type: "POST",
data: JSON.stringify(data.field),
contentType: "application/json",
success: function (res) {
btn.stop(function () {
localStorage.setItem("access_token", res.access_token);
localStorage.setItem("refresh_token", res.refresh_token);
popup.success("登录成功", function () {
location.href = "/";
});
});
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
btn.stop(function () {
popup.failure(XMLHttpRequest.responseJSON.message);
});
},
});
return false;
});
});
后端完成登录
python
@passport_api.post("/login")
def login_in():
data = request.get_json()
user: UserORM = db.session.execute(
db.select(UserORM).where(UserORM.username == data["username"])
).scalar()
if not user:
return {"message": "用户不存在", "code": -1}, 401
if not user.check_password(data["password"]):
return {"message": "用户密码错误", "code": -1}, 401
access_token = create_access_token(user)
refresh_token = create_refresh_token(user)
response = make_response(
{
"code": 0,
"msg": "登录成功",
"access_token": access_token,
"refresh_token": refresh_token,
}
)
return response
退出逻辑
完善前端点击退出按钮
js
admin.logout(function () {
$.ajax({
type: "GET",
url: "/api/v1/logout",
success: function (data) {
console.log(data);
if (data.code === 0) {
localStorage.removeItem("access_token");
localStorage.removeItem("refresh_token");
popup.success("注销成功");
setTimeout(function () {
location.href = "/view/login.html";
}, 1000);
}
},
});
// 清空 tabs 缓存
return new Promise((resolve) => {
resolve(true);
});
});
后端实现
python
@passport_api.route("/logout", methods=["GET", "POST"])
@jwt_required()
def logout():
return {"msg": "退出登录成功", "code": 0}