该视频仅会员有权观看
立即开通课程「Next.js 前端应用开发实践」权限。
- 创建名为"配置"的新页面，并定义为tsx文件中的组件，放在app的登录目录下。
- 页面路由地址设为login，通过浏览器可以访问并显示登录配置。
- 在登录目录下新建名为head的文件，定义为tsx组件命名为hat，其中包含用户登录的文本和插图元素。
- 登录页面(head组件)有一个登录标签，浏览器中可以看到用户登录的标签和欢迎语。
- 在登录页面中使用自定义的hook use a login，包含state设置用户名、密码以及登录功能，由于使用了state，需要定义为客户端组件。
- 使用use client指令，并在组件中绑定form元素的on submit事件。
- 添加输入框组件，绑定用户名(name)和密码(password)的数据及其onChange事件处理函数set name和set password。
- 准备提交按钮，绑定onClick事件处理函数以执行登录操作。
- 浏览器中测试输入用户名和密码后，点击登录，页面刷新，成功后输出控制台信息显示用户ID和token。
上一节
定义登录时需要用的数据与方法（useLogin）
下一节
定义处理当前用户需要的 AuthProvider
