寫在前面

該系列文章是為具有開發(fā)能力的朋友寫作的，目的是幫助他們在scratch 3.0的基礎上開發(fā)一套完整的集scratch 3.0編程工具、用戶社區(qū)和作品云端存儲及分享、品牌集成于一體的scratch編程平臺。如果您不是開發(fā)者，但想要擁有自己的教育平臺和品牌，也歡迎學習交流和洽談合作。

所以如果您是想學習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狀態(tài)：

const MENU_USER = 'userMenu';

初始為false關閉狀態(tài)：

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

增加打開和關閉以及狀態(tài)檢測的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方法中調用它:

運行項目成功登錄，點擊下拉菜單，登出，用戶信息消失并出現登錄按鈕。打開瀏覽器開發(fā)工具，看到localStorage中存儲的token也被清空了。說明成功登出了。

這里登出時我們沒有向后臺發(fā)送請求，讓后臺也做相關的登出操作，目前來看并沒有什么大問題，只要保證客戶端沒有有效的token存在就行，如果后面有更高的安全需求考慮我們再來進一步完善它。

另外，在登出時，我們可能正在進行scratch項目創(chuàng)作，并且還沒有保存，這時需要提示用戶進行相關的操作，并且退出后清空用戶的工作區(qū)內容。

以上工作我們在后面將作品云端保存和加載功能實現后再來一起完善它。

所以下一章起，我們計劃開始集成作品管理系統(tǒng)，實現用戶scratch作品集的云端保存和載入以及相關管理功能。對于用戶系統(tǒng)，其實至少還需要一個管理的頁面，我們計劃留到作品管理系統(tǒng)集成完后再來完成，因為到那時我們的系統(tǒng)的基本框架就差不多了，圍繞基本框架來豐富功能模塊就會清晰很多。

聲明：本文章由網友投稿作為教育分享用途，如有侵權原作者可通過郵件及時和我們聯系刪除