寫在前面

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

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

前言

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

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

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

開始實(shí)現(xiàn)

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

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

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

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

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

在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)檢測(cè)的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)閉:

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

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

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

登出actions:

const DONE_USER_LOGOUT = 'DONE_USER_LOGOUT'; // 標(biāo)識(shí)登出過程成功完成
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)用它:

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

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

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

以上工作我們?cè)诤竺鎸⒆髌吩贫吮４婧图虞d功能實(shí)現(xiàn)后再來一起完善它。

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

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