利用SessionStorage在JavaScript中管理用户认证令牌

{
    "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) {
        console.log('登录成功');
        // 使用 sessionStorage.setItem() 存储令牌和商家代码
        sessionStorage.setItem("token", response.data[0].token);
        sessionStorage.setItem("merchant_code", response.data[0].merchant_code);

        // 登录成功后可以进行页面跳转或更新UI
        // window.location.href = '/dashboard';
    } else {
        // 登录失败，显示错误提示
        Swal.fire({
            icon: 'error',
            title: '错误',
            text: '登录失败，请重试',
            confirmButtonColor: 'red',
        });
    }
    console.log(response); // 打印完整的响应以便调试
})
.catch((e) => {
    // 处理网络错误或服务器连接失败
    Swal.fire({
        icon: 'error',
        title: '错误',
        text: '服务器连接失败，请稍后再试！',
        confirmButtonColor: 'red',
    });
});

/**
 * 检查用户是否登录并获取受保护数据
 */
function fetchProtectedData() {
    // 从 sessionStorage 中获取存储的令牌
    const token = sessionStorage.getItem("token");

    if (token) {
        // 用户已登录，使用令牌发起请求
        fetch("http://127.0.0.1:8000/api/user/profile", { // 示例：一个需要认证的API端点
            method: "GET",
            headers: {
                "Content-Type": "application/json",
                "Authorization": `Bearer ${token}` // 将令牌添加到 Authorization 头
            }
        })
        .then(res => {
            if (!res.ok) {
                // 如果响应状态码不是 2xx，抛出错误
                if (res.status === 401 || res.status === 403) {
                    // 令牌无效或无权限，可能需要重新登录
                    console.error("认证失败或无权限，请重新登录。");
                    // 清除令牌并重定向到登录页
                    sessionStorage.clear();
                    // window.location.href = '/login';
                }
                throw new Error(`HTTP error! Status: ${res.status}`);
            }
            return res.json();
        })
        .then(data => {
            console.log("成功获取受保护数据:", data);
            // 在此处处理获取到的数据，例如更新UI
        })
        .catch(error => {
            console.error("获取受保护数据失败:", error);
            // 处理其他网络或解析错误
        });
    } else {
        // 用户未登录，引导用户进行登录
        console.log("用户未登录，请先登录。");
        // window.location.href = '/login'; // 重定向到登录页面
    }
}

// 示例调用：在页面加载后或某个事件触发时调用此函数
// fetchProtectedData();

/**
 * 执行用户登出操作
 */
function logout() {
    // 清除所有会话存储数据，适用于彻底清除用户会话信息
    sessionStorage.clear();

    // 或者，如果只想清除特定项，可以使用 removeItem
    // sessionStorage.removeItem("token");
    // sessionStorage.removeItem("merchant_code");

    console.log("用户已登出，会话信息已清除。");
    // 登出后通常会重定向到登录页面或首页
    // window.location.href = '/login';
}

// 示例：为登出按钮添加事件监听器
// document.getElementById('logoutButton').addEventListener('click', logout);