在这个登录页面上可以添加一个用户登录用的表单。打开 AuthLogin 组件。

先在组件里准备两个数据，名字是 name，对应的修改器的名字叫 setName，它的值可以用一下 useState 这个 hook，默认的初始值是空白字符。下面再添加一个数据，名字叫 password，修改器的名字是 setPassword，用一下 useState，初始值设置成空白字符。

login

在组件上面再去定义请求登录需要用的这个方法，名字叫 login，用一个箭头函数。函数里判断一下 name 并且 password，如果它们都有值，里面用一组 try，catch，catch 到错误的时候可以在控制台上输出 error 。

在 try 里面可以请求后端服务提供的用户登录接口，解构一下请求成功后得到的响应，需要的是 data，下面在控制台上输出这个 data，也就是后端应用在响应里包含的数据。等于 await，用一下 apiHttpClient.post 这个方法发送请求，地址是 login，提供一个对象数据 ，里面添加一个 name 还有 password。

视图

然后可以设置一下组件的视图，先用一组 form 标签，也就是表单元素，绑定 onSubmit 提交事件，直接设置一下事件处理器，有个 event 参数，执行一下 event.preventDefault() 禁用提交事件的默认行为。

表单元素里先添加一个输入用户名的文本字段，一组 div，里面是一个 text 类型的 input 元素，在元素上用 placeholder 把占位符文字设置成名字，然后 autoComplete 设置成 username，再把 value 设置成在组件里添加的 name 这个状态的值，绑定 onChange 事件，设置一下事件处理器，有个 event 参数，在处理器里执行 setName ，把 name 这个状态的值改成 event.currentTarget.value 。

复制一份，再添加一个 input 元素，它的 type 可以设置成 password，输入用户密码用的字段，placeholder 设置成密码，autoComplete 是 current-password，value 的值是 password 这个状态的值，同样绑定 onChange 事件，在处理器里执行 setPassword 修改 password 字段的值。

下面再添加一个确定登录需要的按钮，一组 div，里面包装一组 button 元素，按钮文字是登录，绑定 onClick 事件，用 login 这个方法来处理。

这个 password 类型的 input 元素的样式可以修改一下，打开 app.css，在这段设置 text 类型的 input 元素的样式里面，在选择器的列表里再添加一个 input[type='password']。

测试

在浏览器上测试一下，在名字这里输入用户名，比如李白，然后在密码字段输入用户的密码，123123，点击登录，这回服务端成功处理了用户登录请求，在响应的数据里包含一些有用的数据，比如用户的 id，名字，还有给这个用户签发的令牌。

在前端这里，用户成功登录以后，下回再请求服务端接口的时候，需要在请求的头部里面包含这个令牌。这样服务端那里可以根据这个令牌，判断出是在为哪个用户提供服务了。