JavaScript前端：API认证令牌的存储与应用实践

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

fetch("http://127.0.0.1:8000/api/login", {
    method: "POST",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify(payload) // 假设payload是包含用户凭据的对象
})
.then((res) => res.json())
.then((response) => {
    if (response.message === "Login successful") {
        console.log('登录成功');
        // 确保响应结构正确，并访问到token和merchant_code
        if (response.data && response.data.length > 0) {
            sessionStorage.setItem("token", response.data[0].token);
            sessionStorage.setItem("merchant_code", response.data[0].merchant_code);
            console.log('令牌和商户码已存储到sessionStorage');
            // 可以在此处执行登录后的页面跳转或UI更新
        } else {
            console.error('API响应数据结构不符合预期，无法获取令牌。');
        }
    } else {
        Swal.fire({
            icon: 'error',
            title: '错误',
            text: '登录失败，请重试',
            confirmButtonColor: 'red',
        });
    }
    console.log(response);
})
.catch((e) => {
    Swal.fire({
        icon: 'error',
        title: '错误',
        text: '服务器连接失败，请稍后再试！',
        confirmButtonColor: 'red',
    });
});

const token = sessionStorage.getItem("token");

if (token) {
    // 用户已登录，可以发送带令牌的请求
    console.log("用户已登录，令牌存在。");

    // 示例：访问受保护的用户数据API
    fetch("http://127.0.0.1:8000/api/user/profile", {
        method: "GET",
        headers: {
            "Content-Type": "application/json",
            "Authorization": `Bearer ${token}` // 将令牌添加到Authorization头
        }
    })
    .then(res => res.json())
    .then(data => {
        console.log("用户资料：", data);
        // 处理获取到的用户资料
    })
    .catch(error => {
        console.error("获取用户资料失败：", error);
        // 处理错误，例如令牌过期或无效
        if (error.response && error.response.status === 401) {
            // 令牌无效或过期，可能需要强制用户重新登录
            Swal.fire({
                icon: 'warning',
                title: '会话过期',
                text: '您的登录会话已过期，请重新登录。',
                confirmButtonColor: 'red',
            }).then(() => {
                // 清除令牌并跳转到登录页
                sessionStorage.removeItem("token");
                sessionStorage.removeItem("merchant_code");
                // window.location.href = '/login'; // 示例：跳转到登录页
            });
        }
    });

} else {
    // 用户未登录，令牌不存在，可能需要重定向到登录页
    console.log("用户未登录，令牌不存在。");
    // window.location.href = '/login'; // 示例：跳转到登录页
}

function logoutUser() {
    // 清除存储的令牌和相关信息
    sessionStorage.removeItem("token");
    sessionStorage.removeItem("merchant_code");
    // 如果有其他会话相关数据，也一并清除
    // sessionStorage.clear(); // 或者使用clear()清除所有sessionStorage数据

    console.log("用户已登出，令牌已清除。");
    // 执行登出后的页面跳转或UI更新，例如重定向到登录页
    // window.location.href = '/login';
}

// 假设有一个登出按钮或链接调用此函数
// document.getElementById('logoutButton').addEventListener('click', logoutUser);