返回文章列表

文章

JavaScript全栈开发(八)

Redux toolkit完善登录和登出功能

部分内容超过 Notion API 单页读取上限,已尽力加载可访问内容。

# 📝 实现Logout ## 更新 authSlice.js 在frontend\\src\\features\\auth\\authSlice.js中添加logout函数 ```javascript export const logout = createAsyncThunk( "auth/logout", async () => await authService.logout() ); ``` ## 更新 authService.js 在frontend\\src\\features\\auth\\authService.js中添加logout函数 ```javascript const logout = () => localStorage.removeItem("user"); const authService = { register, logout }; ``` logout逻辑很简单,直接在localStorage中删除”user” ## 添加logout按钮 在frontend\\src\\components\\Header.js中添加按钮和点击事件 ![](https://prod-files-secure.s3.us-west-2.amazonaws.com/4b1b167f-4b52-4031-8233-f4f2689af574/86c8aafa-09b3-43e6-b0f8-c733c31158c2/image.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAZI2LB4662BKQRGKA%2F20261016%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20261016T214123Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjECMaCXVzLXdlc3QtMiJGMEQCIBiyRn0Fumw3Hinst9nyQnMFEZwnvbCMHrEWssYR%2Fdn8AiAzik32ZmKNSehJrOsXZ%2FF464VyoiLWzNGayfLnU%2B5NyiqIBAjs%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F8BEAAaDDYzNzQyMzE4MzgwNSIMqRg2B%2Bc42%2FytWd0YKtwD76vjr0lCaQmskm8RW9QDaBDjRgTqnLbOZnUVk%2FPYVmWWA1geS4yqlz6tYuGXxvGTCziGNWZOaLLnYjOi0yCvZvV0TOUx3gIXh1543STPqmeRA7C4HFjrXKbB%2BwULtQA8kr6XDIjhSoB8LukFIJaAxiOaw3vOLOPblkilJs57sSyf971fxFPMQJ20PkqqeNJ6SBHC3DDub84K6EXDT4F%2FGI1m8rg8EhvHka3L2sAoI4oFgsREpYh6o3zw9R0JZc0I4HesdcokjCOWFnOppnE2%2FbjP6r3SeJRlhuyxx661%2B%2F3%2BKB4xmBy6kU%2F4ovlS%2F2VuFYLfo8r96ooL11LABKzRj%2FhCAMTLKlu81iei4bpsQyZWxvP9yuAgCZ5t1%2FG%2FmJ%2F2k9YxkvFs9YlixcJ5iShPdkf0jtQUVStoM0LZfqq5d2ke%2FtjBDBgeZOrI%2BFXIuUAOjdZRD25apXtZUML7fhFbPHxLFxv0VpBl4EbU73izgwz7NU2ZbgGVrpEvsWIYOerRxwrqiReNx%2B2JrrhLCStWt282p9KAd4WagzPi%2Fax%2BYVDVuPl25ljGVsXC778n%2FL2PZwAP7Nb98GCgqrzTsrQ5eeJVgMDHBTN4FYF9C90%2FlugzdDsJyX7yejDM%2FjYwg%2BzJ1gY6pgHMJJ6N7MszAJv%2BHo5zWmcIsYEQwTYSiRh%2FWjEF1e3u9nAIufYKyIB5hrK9Gfqf%2FGVP%2BWc7haneSFxmI9R1cxGE0v6kV3u%2F4rgJeW%2FhgsgMZ2k7Bd80nvBp%2FbPwxJdnd4NUFlh6r9p%2BgBBXDAe1ISBd6838blSiFKfobrFgkzkA9TFS%2B%2BBF7O7rxF5r19LGi7Eho0C6hv%2FQKNtix84j1GfpECW9b4%2BG&X-Amz-Signature=d218fc4b37ecb2afa64edfd9b825b263a33f250eea00cad877dcb9b5c92dc876&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject#notion_record=block.1c85c571-bb7d-805d-8118-d328a2e14ba4.4b1b167f-4b52-4031-8233-f4f2689af574) 在在frontend\\src\\features\\auth\\authSlice.js中添加logout状态判断 ![](https://prod-files-secure.s3.us-west-2.amazonaws.com/4b1b167f-4b52-4031-8233-f4f2689af574/96eb6486-efbe-4c42-9cb2-d6fb31f8c808/image.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAZI2LB4662BKQRGKA%2F20261016%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20261016T214123Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjECMaCXVzLXdlc3QtMiJGMEQCIBiyRn0Fumw3Hinst9nyQnMFEZwnvbCMHrEWssYR%2Fdn8AiAzik32ZmKNSehJrOsXZ%2FF464VyoiLWzNGayfLnU%2B5NyiqIBAjs%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F8BEAAaDDYzNzQyMzE4MzgwNSIMqRg2B%2Bc42%2FytWd0YKtwD76vjr0lCaQmskm8RW9QDaBDjRgTqnLbOZnUVk%2FPYVmWWA1geS4yqlz6tYuGXxvGTCziGNWZOaLLnYjOi0yCvZvV0TOUx3gIXh1543STPqmeRA7C4HFjrXKbB%2BwULtQA8kr6XDIjhSoB8LukFIJaAxiOaw3vOLOPblkilJs57sSyf971fxFPMQJ20PkqqeNJ6SBHC3DDub84K6EXDT4F%2FGI1m8rg8EhvHka3L2sAoI4oFgsREpYh6o3zw9R0JZc0I4HesdcokjCOWFnOppnE2%2FbjP6r3SeJRlhuyxx661%2B%2F3%2BKB4xmBy6kU%2F4ovlS%2F2VuFYLfo8r96ooL11LABKzRj%2FhCAMTLKlu81iei4bpsQyZWxvP9yuAgCZ5t1%2FG%2FmJ%2F2k9YxkvFs9YlixcJ5iShPdkf0jtQUVStoM0LZfqq5d2ke%2FtjBDBgeZOrI%2BFXIuUAOjdZRD25apXtZUML7fhFbPHxLFxv0VpBl4EbU73izgwz7NU2ZbgGVrpEvsWIYOerRxwrqiReNx%2B2JrrhLCStWt282p9KAd4WagzPi%2Fax%2BYVDVuPl25ljGVsXC778n%2FL2PZwAP7Nb98GCgqrzTsrQ5eeJVgMDHBTN4FYF9C90%2FlugzdDsJyX7yejDM%2FjYwg%2BzJ1gY6pgHMJJ6N7MszAJv%2BHo5zWmcIsYEQwTYSiRh%2FWjEF1e3u9nAIufYKyIB5hrK9Gfqf%2FGVP%2BWc7haneSFxmI9R1cxGE0v6kV3u%2F4rgJeW%2FhgsgMZ2k7Bd80nvBp%2FbPwxJdnd4NUFlh6r9p%2BgBBXDAe1ISBd6838blSiFKfobrFgkzkA9TFS%2B%2BBF7O7rxF5r19LGi7Eho0C6hv%2FQKNtix84j1GfpECW9b4%2BG&X-Amz-Signature=d020e5f9611504ee304c033869fdfc08a72d2d0d9e324a7b912c0484d501b50b&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject#notion_record=block.1c85c571-bb7d-80fa-a5ea-e72f7c4dfc19.4b1b167f-4b52-4031-8233-f4f2689af574)