登录成功以后需要做几件事，首先要设置当前用户，让应用里的其它组件可以使用当前用户相关数据。还需要设置一下请求接口用的客户端的身份验证头部。另外在刷新应用的时候，需要恢复一下用户的登录状态。

我们可以用一个 Context 提供当前成功登录的用户，还有设置当前用户用的方法。

provider

新建一个文件，放在 app/login 的下面，名字是 provider.tsx，在这个文件里定义一个组件，名字是 AuthProvider。设置一下组件的属性类型，在里面添加一个 children 属性，类型是 ReactNode。

然后准备一个表示当前用户的类型，名字是 CurrentUser，它是一个对象，里面有 id，类型是 number，还有 name，类型是 string，还有一个 token 类型是 string。这些东西就是登录成功以后得到的响应数据。

下面再定义一个类型，名字是 AuthContextValue，它是一个对象，里面有 currentUser? 类型是 CurrentUser，还有 setCurrentUser? 类型是 Dispatch>。

AuthContext

然后创建并且导出一个 Context，名字是 AuthContext，用一下 createContext，默认值是一个空白的对象，类型是 AuthContextValue。

组件

在组件里准备一个 state，解构声明 currentUser 还有 setCurrentUser，用一下 useState，类型是 CurrentUser。

组件的视图这里，用一下 AuthContext.Provider，设置一下它的 value 属性，这个属性的值就是这个 Context 要提供的东西，一个对象，里面添加一个 currentUser，还有 setCurrentUser。它里面包装的东西就是 props.children。

使用

打开 app/layout，在这个默认布局组件里面，我们可以用一下 AuthProvider 这个组件，在 body 元素里面，用一下 AuthProvider 这个组件，包装一下其它这些东西。这样这个组件的所有的后代就都可以使用 AuthContext 提供的东西了。

页面报了一个错误，这是因为 AuthProvider 这个组件里用了 useState，所以它必须得是一个客户端软件，在文件顶部，用一下 'use client' 这个指令。