用户在登录页面输入用户名还有密码，按一下确定登录，可以执行 authModel 里的 login 方法请求登录。打开 auth_login_form.dart，找到 submitButton，设置一下这个 onPressed ，用 async 标记一下这个方法。

在方法里面，先执行一下 formKey.currentState!.validate() 这个方法，执行一下表单的验证。下面可以用一组 try，catch 区块，在这个 catch 区块里设置一下 on HttpException，处理一下 HttpException 这种异常。

出现这种异常，执行一下 ScaffoldMessenger.of(context).showSnackBar() ，给这个方法提供一个 SnackBar，用 content 设置一下要显示的提示内容，因为这里 catch 到的是 HttpException 这种异常，所以这个 e 参数里面有个 message 属性，它的值就是异常信息，用一下 Text 小部件，文字是 e.message 。

下面再处理一下 try 区块里要做的事情，这里可以 await ，执行 authModel.login 这个方法，提供一个 LoginData 类型的数据，设置一下 name，值是 name!，再设置一下 password，值是 password! 。

在这个 build 方法的上面，可以再声明一个 appModel，它的值是 context.read() ，类型是 AppModel，你也可以使用 Provider.of 这个方法得到需要用的这个 AppModel 实例。

请求登录成功以后，在这里可以执行一下 appModel.setPageName，把 pageName 这个属性的值设置成一个空白的字符串。

测试

下面再测试一下，在这个用户登录页面，先输入用户名，注意这里如果想要输入中文，你需要先修改一下模拟器设备的配置，添加中文输入法。按一下 command + K 可以打开设备的键盘。再输入这个用户的密码。如果您用的是我提供的服务端应用接口，这个用户名与密码要提前设置好。

完成以后，按一下确定登录，这样应用会返回到这个用户页面，在页面上会显示当前登录的用户的名字，按一下这个用户名会执行 authModel 里的 logout 方法退出登录。成功以后，界面上会显示请登录，按一下这个按钮，可以打开登录页面。

再输入用户名，这里可以输入一个错误的用户名，比如张三丰，设置一下登录的密码，然后确定一下登录。因为应用里并不存在这个张三丰用户，所以服务端应用给我们的响应会是一个异常响应，也就是响应的状态码不是 200，这样我们的应用就会 throw 一个 HttpException 异常，带着一个异常信息，这里显示的就是这个异常信息，这个异常信息是服务端应用那里给我们提供的。

修改一下正确的用户名，设置一个错误的密码，再试一下确定登录，这回会显示密码不对。修改一下登录密码，再确定一下，成功以后会回到用户页面，显示当前登录的用户的名字。