[JavaScript知识库]React管理后台退出功能

使用Dropdown 组件进行页面调整
首先我们在Frame里的index.js 里面引入Dropdown

import { Layout, Menu, Breadcrumb, Icon ,Dropdown} from 'antd';

引入好之后放入<Header> 里面 ，然后做一个样式
Dropdown有一个 overlay是一个类似于menu,然后我们定义一个Menu

<Dropdown overlay={popMenu} >
                    <div>
                        <sapn> 超级管理员</sapn>
                        <Icon type='down' />
                    </div>
                </Dropdown>//在<Header>里面
const popMenu = (<Menu>
    <Menu.Item key='noti'>
     通知中心
    </Menu.Item>
    <Menu.Item key='setting'>
     设置
    </Menu.Item>
    <Menu.Item key='logOut'>
     退出
    </Menu.Item>
</Menu>) //放在function内部，因为等会需要写点击事件

在添加一个样式，让Header 两端对齐一下
在 Frame文件下创建一个frame.css
在index.js里面引入样式

import '../Frame/frame.css';

.header{
    display: flex;
    justify-content: space-between;
}

这个样子我们的弹出层就已经写好了，看下效果

然后我们在加一个头像 <Avatar>

import { Layout, Menu, Breadcrumb, Icon, Dropdown,Avatar} from 'antd';

<Dropdown overlay={popMenu} >
                    <div>
                    <Avatar>U</Avatar>
                        <sapn style={{color}} > 超级管理员</sapn>//给span 添加一个颜色
                        <Icon type='down' />
                    </div>
                </Dropdown>

接着写一个退出的点击事件

 const popMenu = (<Menu onClick ={(p)=>{
        if(p.key ==='logOut'){//如果我们当前点的是退出,就回到login页面，同时清除掉token
        clearToken()
            props.history.push('/login')
        }else{
            message.info(p.key);//通过info 弹出一个提示
        }
    }}>
        <Menu.Item key='noti'>
         通知中心
        </Menu.Item>
        <Menu.Item key='setting'>
         设置
        </Menu.Item>
        <Menu.Item key='logOut'>
         退出
        </Menu.Item>
    </Menu>)

在auth.js 里面写一个方法清除一下token

export function clearToken() {
	return	localStorage.removeItem('token');
	}

然后引入一下这个js

import { clearToken } from '../../utils/auth';

接着看一下页面的效果
点击退出的时候会回到登录页面 。点击其他按钮会有相应的提示