logo

该视频仅会员有权观看

立即开通课程「Next.js 前端应用开发实践」权限。

¥
199
/ 年

定义处理当前用户需要的 AuthProvider

登录成功后需设置当前用户数据供应用其他组件使用,并设置请求接口身份验证头部。在应用刷新时恢复登录状态。创建provider.tsx文件定义AllProvider组件和对应属性类型。定义CurrentUser类型包含用户ID、姓名和令牌。也定义AllContextValue类型并创建并导出AllContext。在AllProvider中使用useState准备状态currentUsersetCurrentUser,并设置为AllContext的默认值。在AppLayout中使用AllProvider使所有子组件能访问上下文。由于使用了useStateAllProvider必须作为客户端组件,文件顶部需使用useClient指令。