首先创建以下两个文件:
login.html — 登录入口及回调处理api/index.php — 登录接口逻辑相关完整代码可从此处复制:
login.html
api/index.php
api/index.php 放在 api 目录下。否则,你需要修改 login.html 中的配置,使其指向正确的路径。
在需要展示登录入口的页面中加入以下 HTML 和 JavaScript:
<div onclick="to_login()"> 登录 </div>
<script>
function to_login() {
location.replace('login.html?back_url=' + encodeURIComponent(location.href))
}
function to_exit() {
location.replace('login.html?exit=1&back_url=' + encodeURIComponent(location.href))
}
</script>
说明:to_login() 跳转到登录页并携带当前页面地址,登录后可返回;to_exit() 用于退出登录。
创建 get_session.php 文件,用于输出当前登录用户名:
<?php
session_start();
echo $_SESSION['user_name'] ?? '';
然后在前端通过 JavaScript 检测:
fetch('get_session.php')
.then(res => res.text())
.then(userName => {
console.log(userName);
if (userName) {
// 登录成功
}
});
如果返回的用户名非空,则用户已登录;否则未登录。
在上一步的 JavaScript 代码中,当 userName 有值时,即可执行进入应用的逻辑。例如跳转、渲染界面或初始化数据。
if (userName) { ... } 中的内容替换为实际业务代码。
在后台 PHP 文件中,通过 $_SESSION['user_name'] 获取当前登录用户:
<?php
session_start();
$username = $_SESSION['user_name'];
获取 $username 后,可用于权限验证、数据库查询或显示用户信息。
在页面合适位置放置退出入口:
<div onclick="to_exit()">退出</div>
点击后触发 to_exit() 函数,退出登录并返回当前页。