16.退出登陆功能

点击退出按钮，会弹出一个对话框，然后让你选择退出或取消，使用组件Modal组件

在header/index.jsx文件中代码如下： 

// 退出登陆
const navigate = useNavigate()
const { confirm } = Modal
function logout(){
    // 显示确认对话框
    confirm({
        title: 'Do you Want to delete these items?',
        icon: <ExclamationCircleFilled />,
        content: '确定退出登陆吗?',
        onOk() {
            console.log('OK');
            // 删除保存的user数据
            memoryUtils.user = {}
            storageUtils.removeUser()
            // 跳转至login页面
            navigate('/login')
        },
    });
}

return (
    <div className="header">
            <div className="header-top">
                <span>欢迎, {username}</span>
                <a href="#" onClick={logout}>退出</a>
            </div>
            <div className="header-bottom">
                <div className="header-bottom-left">{titleStr}</div>
                <div className="header-bottom-right">
                    <span>{dateStr}</span>
                    <img src={weather} alt="weather"/>
                    <span>{weatherStr}</span>
                </div>
            </div>
        </div>
)

这里的 退出 链接button自己实现

在components目录下新建link-button目录

index.jsx文件内容如下:

import React from "react";
import './index.css'
/*
    退出 链接button自己实现
 */

export default function LinkButton(props){
    return <button {...props} className="link-button"></button>
}

index.css

.link-button {
    /* 背景色透明*/
    background-color: transparent;
    /* 无边框 */
    border: none;
    /*去掉轮廓 鼠标划上去显示的轮廓*/
    outline: none;
    color: #00b96b;
    /* 鼠标 上去显示手 */
    cursor: pointer;
}