import jwt_decode from 'jwt-decode';

function checkTokenValidity(token) {
    try {
        const decodedToken = jwt_decode(token);
        const currentTime = Date.now() / 1000; // 獲取當(dāng)前時(shí)間（以秒為單位）
        if (decodedToken.exp < currentTime) {
            console.log('令牌已過(guò)期（令牌有效期檢查）');
            return false;
        }
        return true;
    } catch (error) {
        console.log('令牌解析出錯(cuò):', error);
        return false;
    }
}

// 在發(fā)送請(qǐng)求前調(diào)用此函數(shù)檢查令牌
const token = localStorage.getItem('token');
if (checkTokenValidity(token)) {
    // 令牌有效，繼續(xù)發(fā)送請(qǐng)求
    // 這里假設(shè)使用`axios`發(fā)送請(qǐng)求
    axios.get('/api/data');
} else {
    console.log('登錄狀態(tài)可能已過(guò)期，需處理');
    // 處理登錄過(guò)期情況，如提示用戶重新登錄
}

function checkTokenStatus() {
    axios.get('/auth/check')
        .then(response => {
            if (!response.data.valid) {
                // 令牌無(wú)效，執(zhí)行登出邏輯
                logout();
            }
        })
        .catch(error => {
            // 網(wǎng)絡(luò)錯(cuò)誤或其他問(wèn)題，執(zhí)行登出邏輯
            logout();
        });
}
setInterval(checkTokenStatus, 15 * 60 * 1000); // 每15分鐘檢查一次

let lastActivityTime = Date.now();
document.addEventListener('mousemove', () => lastActivityTime = Date.now());
document.addEventListener('keydown', () => lastActivityTime = Date.now());

setInterval(() => {
    if (Date.now() - lastActivityTime < 5 * 60 * 1000) { // 用戶5分鐘內(nèi)有操作
        checkTokenStatus();
    }
}, 15 * 60 * 1000);

axios.interceptors.response.use(response => {
    return response;
}, error => {
    if (error.response.status === 401) {
        // 令牌無(wú)效或過(guò)期，執(zhí)行登出邏輯
        logout();
    }
    return Promise.reject(error);
});

function logout() {
    // 清除本地存儲(chǔ)的令牌
    removeToken();
    // 彈出登錄提示
    alert('登錄已過(guò)期，請(qǐng)重新登錄');
    // 跳轉(zhuǎn)到登錄頁(yè)面
    window.location.href = '/login';
}

function saveToken(token, expiresIn) {
    const expirationTime = Date.now() + expiresIn * 1000;
    localStorage.setItem('token', token);
    localStorage.setItem('tokenExpiration', expirationTime);
}

function isTokenExpired() {
    const expirationTime = localStorage.getItem('tokenExpiration');
    return Date.now() >= expirationTime;
}

axios.interceptors.request.use(config => {
    if (isTokenExpired()) {
        // 令牌過(guò)期，執(zhí)行登出邏輯
        logout();
    } else {
        const token = localStorage.getItem('token');
        config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
}, error => {
    return Promise.reject(error);
});

import React, { useState } from 'react';
import { Button, Modal } from 'react-bootstrap';
import { useHistory } from 'react-router-dom';

const LoginExpiredModal = () => {
    const [dialogVisible, setDialogVisible] = useState(false);
    const history = useHistory();
    // 這里模擬存儲(chǔ)當(dāng)前頁(yè)面的一些狀態(tài)信息，比如表單數(shù)據(jù)等
    const currentPageState = {
        formData: { name: 'John', age: 30 }
    };

    const showModal = () => {
        setDialogVisible(true);
    };

    const handleClose = () => {
        // 將當(dāng)前頁(yè)面狀態(tài)存儲(chǔ)到localStorage中
        localStorage.setItem('pageState', JSON.stringify(currentPageState));
        // 重定向到登錄頁(yè)面
        history.push('/login');
    };

    return (
        <div>
            <Button onClick={showModal}>模擬觸發(fā)登錄過(guò)期提示</Button>
            <Modal show={dialogVisible} onHide={handleClose}>
                <Modal.Header closeButton>
                    <Modal.Title>登錄過(guò)期</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <p>您的登錄已過(guò)期，請(qǐng)重新登錄。</p>
                </Modal.Body>
            </Modal>
        </div>
    );
};

export default LoginExpiredModal;