用户退出登录的时候，在我们的 React 前端应用里，主要做的就是清空一下本地存储对应的数据，再重置一下 HTTP 客户端的身份验证头部。

auth.provider

打开 auth.provider，先在 AuthContextValue 这个类型里添加一个 logout，类型是 Function，创建这个 Context 提供的默认值里面，添加一个空白的 logout 方法。

在组件里定义一下退出登录功能，名字是 logout，它是一个函数，在函数里面先执行 setStorage ，把本地存储里的 StorageKey.currentUser 这个数据的值设置成空白字符。下面再执行 setCurrentUser，把 currentUser 的值设置成 undefined。最后再执行 setAuthHeader，修改一下 HTTP 客户端的身份验证头部，提供一个空白的字符。

修改一下 AuthContext.Provider 组件的 value 属性的值，在这个对象里面再添加一个 logout。

app-header.tsx

打开 app-header.tsx，在文件顶部先导入一个小图标，名字是 logoutIcon，位置是 app 下面 icons 下面的 logout.svg。

在组件里使用了 AuthContext，把它提供的 logout 先解构出来。再去修改一下组件视图，在页头这里再添加一个退出小图标，先判断一下 currentUser，如果 currentUser 是真的，可以添加一组 div，里面包装的是一个 img 元素，src 的值设置成 logoutIcon，alt 属性的值是退出，绑定 onClick，设置一下事件处理器，在这个处理器里面可以执行一下 AuthContext 提供的logout()。

测试

在浏览器，测试一下，现在用户是登录状态，所以这里会显示一个退出登录小图标，这个头部的样式可以再调整一下，现在它们没有居中对齐，这里主要是因为 img 这个元素的问题。打开 app.css ，在这里可以用 img 作为选择器，把 display 设置成 block。

再回到浏览器，然后点一下这个退出登录的这个小图标，会执行 logout 退出登录。

本地存储里的 currentUser 这条数据会被设置成空白，应用里的 currentUser 状态会被设置成 undefined，Http 客户端的身份验证头部里的用户令牌的值会被改成空白字符。