写在前面

该系列文章是为具有开发能力的朋友写作的，目的是帮助他们在scratch 3.0的基础上开发一套完整的集scratch 3.0编程工具、用户社区和作品云端存储及分享、品牌集成于一体的scratch编程平台。如果您不是开发者，但想要拥有自己的教育平台和品牌，也欢迎学习交流和洽谈合作。

所以如果您是想学习scratch少儿编程课程，那请忽略该系列的文章。

前言

前面我们把登录的基本流程实现完成了，不过还留了一个小尾巴，就是用户登出，清除用户的token信息，以确保用户账号的安全性。

我们准备在用户姓名下面做一个下拉菜单，将登出操作放在里面，以后还会在里面放入个人中心，个人作品等菜单项，就像现在mit官网那样：

下面就来实现这一过程。

开始实现

先来实现组件的样式。

找到components/menu-bar/menu-bar.jsx，在之前我们修改的显示头像和姓名的下面，添加一个MenuBarMenu组件，如下:

我们将其open属性先设置为true，让它一直显示，以方便我们调试样式。

编译运行，看到在用户姓名和头像下面正常显示了登出菜单：

下一步来控制菜单的显示与隐藏。

在components/menu-bar/menu-bar.jsx中，为组件MenuBar增加props：userMenuOpen, onClickUser和onRequestCloseUser，分别表示用户判断下拉菜单是否打开，打开下拉菜单操作和关闭下拉菜单操作:

userMenuOpen: PropTypes.bool,onRequestCloseUser: PropTypes.func,onClickUser: PropTypes.func,

在reducers/menus.js中，增加userMenu状态：

const MENU_USER = 'userMenu';

初始为false关闭状态：

const initialState = {[MENU_ACCOUNT]: false,[MENU_FILE]: false,[MENU_EDIT]: false,[MENU_LANGUAGE]: false,[MENU_LOGIN]: false,[MENU_USER]: false};

增加打开和关闭以及状态检测的actions:

const openUserMenu = () => openMenu(MENU_USER);const closeUserMenu = () => closeMenu(MENU_USER);const userMenuOpen = state => state.scratchGui.menus[MENU_USER];

记得export以上actions:

回到components/menu-bar/menu-bar.jsx中，映射刚才的userMenuOpen props和state:

映射onClickUser:

映射onRequestCloseUser:

再完善之前显示MenuBar的控制，现在我们根据之前设置的props来控制菜单的显示和关闭:

重新运行，登录成功后并没有菜单显示，点击用户信息，出现下拉菜单，再点击，菜单关闭，一切都按照我们的设计进行的。

最后一步，我们来实现登出的过程。

先到reducers/user-state.js中增加登出的功能实现。

登出actions:

const DONE_USER_LOGOUT = 'DONE_USER_LOGOUT'; // 标识登出过程成功完成
const logoutSuccess = () => ({type: DONE_USER_LOGOUT});

登出处理方法，先清空本地token，再关闭下拉菜单，清空state中的用户信息：

const logout = dispatch => {localStorage.removeItem('shala_token');dispatch(closeUserMenu());dispatch(logoutSuccess());};

reducer里更新state:

export logout方法:

回到components/menu-bar/menu-bar.jsx中，为MenuBar组件增加props onClickLogout:

onClickLogout: PropTypes.func,

并映射dispatch:

onClickLogout: () => logout(dispatch）

最后在MenuItem的onClick方法中调用它:

运行项目成功登录，点击下拉菜单，登出，用户信息消失并出现登录按钮。打开浏览器开发工具，看到localStorage中存储的token也被清空了。说明成功登出了。

这里登出时我们没有向后台发送请求，让后台也做相关的登出操作，目前来看并没有什么大问题，只要保证客户端没有有效的token存在就行，如果后面有更高的安全需求考虑我们再来进一步完善它。

另外，在登出时，我们可能正在进行scratch项目创作，并且还没有保存，这时需要提示用户进行相关的操作，并且退出后清空用户的工作区内容。

以上工作我们在后面将作品云端保存和加载功能实现后再来一起完善它。

所以下一章起，我们计划开始集成作品管理系统，实现用户scratch作品集的云端保存和载入以及相关管理功能。对于用户系统，其实至少还需要一个管理的页面，我们计划留到作品管理系统集成完后再来完成，因为到那时我们的系统的基本框架就差不多了，围绕基本框架来丰富功能模块就会清晰很多。

--end--

声明：本文章由网友投稿作为教育分享用途，如有侵权原作者可通过邮件及时和我们联系删除：freemanzk@qq.com