JavaScript前端认证：利用sessionStorage管理API令牌

{
    "success": true,
    "message": "Login successful",
    "data": [
        {
            "merchant_code": "000004",
            "token": "4d9519909d99b3d451abeff1512b540e3319124f"
        }
    ]
}

// 假设 payload 是包含用户凭证（如用户名、密码）的对象
const payload = {
    username: "your_username",
    password: "your_password"
};

fetch("http://127.0.0.1:8000/api/login", {
    method: "POST",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify(payload)
})
.then((res) => res.json())
.then((response) => {
    if (response.message === "Login successful" && response.data && response.data.length > 0) {
        // 登录成功，保存令牌和商户代码到 sessionStorage
        sessionStorage.setItem("token", response.data[0].token);
        sessionStorage.setItem("merchant_code", response.data[0].merchant_code);
        console.log('登录成功，令牌已保存！');
        // 可以重定向用户到仪表盘或其他页面
        // window.location.href = '/dashboard';
    } else {
        // 登录失败处理
        Swal.fire({
            icon: 'error',
            title: '错误',
            text: response.message || '登录失败，请重试',
            confirmButtonColor: 'red',
        });
    }
    console.log(response);
})
.catch((e) => {
    // 网络请求或服务器错误处理
    Swal.fire({
        icon: 'error',
        title: '错误',
        text: '服务器连接失败，请稍后再试！',
        confirmButtonColor: 'red',
    });
});

// 示例：获取当前登录用户数据
function fetchUserData() {
    const token = sessionStorage.getItem("token");

    if (token) {
        // 用户已登录，发起带认证令牌的请求
        fetch("http://127.0.0.1:8000/api/user-data", {
            method: "GET",
            headers: {
                "Content-Type": "application/json",
                "Authorization": `Bearer ${token}` // 在请求头中添加认证令牌
            }
        })
        .then(res => res.json())
        .then(data => {
            console.log("用户数据:", data);
            // 处理用户数据
        })
        .catch(error => {
            console.error("获取用户数据失败:", error);
            Swal.fire({
                icon: 'error',
                title: '错误',
                text: '获取用户数据失败，请重试！',
                confirmButtonColor: 'red',
            });
        });
    } else {
        // 用户未登录，可以重定向到登录页或显示提示
        console.log("用户未登录，请先登录。");
        Swal.fire({
            icon: 'info',
            title: '提示',
            text: '您尚未登录，请先登录！',
            confirmButtonColor: 'blue',
        });
        // window.location.href = '/login';
    }
}

// 调用函数以获取用户数据
// fetchUserData();

function logoutUser() {
    // 清除所有会话存储数据
    sessionStorage.clear();
    // 或者只清除特定的令牌和商户代码
    // sessionStorage.removeItem("token");
    // sessionStorage.removeItem("merchant_code");

    console.log("用户已登出，令牌已清除。");
    // 重定向到登录页或首页
    // window.location.href = '/login';
    Swal.fire({
        icon: 'success',
        title: '登出成功',
        text: '您已安全登出！',
        confirmButtonColor: 'green',
    });
}

// 示例：在点击登出按钮时调用
// document.getElementById('logoutButton').addEventListener('click', logoutUser);