logo

该视频仅会员有权观看

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

¥
199
/ 年

使用 AuthContext 设置与使用当前用户

在创建 log in hook 时,结构声明了 set current user 并使用了 use context。这里使用的是 all contextlog in 方法用于检查响应状态是否等于 201(代表登录成功)。若成功,执行 saas current user 方法并传入数据显示当前登录用户名称。若未登录,显示登录链接。创建 app初版的tsx 文件定义 app初版 组件,同样使用 all context。组件视图中可以判断 current user,若存在,显示用户名称;若不存在,显示登录链接。链接组件 linkhref 属性设置为 /login,内含一个 image 组件来源于 next image,图标为 account。开发者可以在 app handler 组件中使用定义好的 app初版 组件,通过刷新、点击登录图标可以测试用户登录。登录成功在页面头部显示用户名,没成功则是因为未按预期检查状态码200,需要执行 set current user 来更新当前用户数据,再次测试登录流程。