寫在前面

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

所以如果您是想學(xué)習(xí)scratch少兒編程課程，那請忽略該系列的文章。

前言

前面我們把登錄的基本流程實現(xiàn)完成了，不過還留了一個小尾巴，就是用戶登出，清除用戶的token信息，以確保用戶賬號的安全性。

我們準(zhǔn)備在用戶姓名下面做一個下拉菜單，將登出操作放在里面，以后還會在里面放入個人中心，個人作品等菜單項，就像現(xiàn)在mit官網(wǎng)那樣：

下面就來實現(xiàn)這一過程。

開始實現(xiàn)

先來實現(xiàn)組件的樣式。

找到components/menu-bar/menu-bar.jsx，在之前我們修改的顯示頭像和姓名的下面，添加一個MenuBarMenu組件，如下:

我們將其open屬性先設(shè)置為true，讓它一直顯示，以方便我們調(diào)試樣式。

編譯運行，看到在用戶姓名和頭像下面正常顯示了登出菜單：

下一步來控制菜單的顯示與隱藏。

在components/menu-bar/menu-bar.jsx中，為組件MenuBar增加props：userMenuOpen, onClickUser和onRequestCloseUser，分別表示用戶判斷下拉菜單是否打開，打開下拉菜單操作和關(guān)閉下拉菜單操作:

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

在reducers/menus.js中，增加userMenu狀態(tài)：

const MENU_USER = 'userMenu';

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

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

增加打開和關(guān)閉以及狀態(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的控制，現(xiàn)在我們根據(jù)之前設(shè)置的props來控制菜單的顯示和關(guān)閉:

重新運行，登錄成功后并沒有菜單顯示，點擊用戶信息，出現(xiàn)下拉菜單，再點擊，菜單關(guān)閉，一切都按照我們的設(shè)計進(jìn)行的。

最后一步，我們來實現(xiàn)登出的過程。

先到reducers/user-state.js中增加登出的功能實現(xiàn)。

登出actions:

const DONE_USER_LOGOUT = 'DONE_USER_LOGOUT'; // 標(biāo)識登出過程成功完成
const logoutSuccess = () => ({type: DONE_USER_LOGOUT});

登出處理方法，先清空本地token，再關(guān)閉下拉菜單，清空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方法中調(diào)用它:

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

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

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

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

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

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