打开用户，现在页面上显示的是 UserProfile 这个小部件，如果用户还没有登录可以显示一个未登录，如果登录了可以显示跟当前登录的用户相关的信息。

user_profile.dart

打开 user_profile.dart，先改造一下这个小部件，在 build 方法里面，先准备一下需要的数据，声明一个 appModel，它的值是 context.read 方法，类型是 AppModel。 下面再声明一个 authModel，它的值用一下 context.watch这个方法，类型是 AuthModel。这个 read 还有 watch 方法不同的地方就是，watch 方法会监听这个 AuthModel 实例的变化，有变化的话，在这里就会重建这个小部件。

然后声明一个 login ，它的值可以用一个 TextButton ，文本按钮，child 用一个 Text 小部件，值是请登录。onPressed 是一个方法，在这个方法里，执行一下 appModel.setPageName ，把 pageName 这个属性的值设置成 AuthLogin。后面我们会配置 Navigator 管理的 pages，在里面添加一个用户登录页面，添加这个页面的依据就是 AppModel 里的 pageName 的值应该等于 AuthLogin。

再声明一个 userProfile ，它的值暂时也先用一个 TextButton ，child 是一个 Text 小部件，文字是 authModel.name，这个 name 属性的值应该是登录成功以后的用户的名字。添加一个 onPressed，它的值是一个方法，在这个方法里可以执行一下 authModel.logout 方法，这个方法可以退出登录。

再修改一下 UserProfile 小部件的 build 方法返回的东西，这里我们可以先把这个Consumer 小部件去掉，因为需要用的数据已经在 build 方法里准备好了。然后这个 Center 小部件的 child，可以判断一下 authModel.isLoggedIn ，如果它的值是 true，这里就用一个 userProfile，如果是 false，就显示一个 login小部件。

观察

观察一下应用界面，现在用户是未登录的状态，所以在这个用户页面会显示请登录这个按钮。

app_router_delegate.dart

打开 app_router_delegate.dart，找到 Navigator 的 pages ，在这组页面的最后，判断一下 appModel.pageName 是不是等于 AuthLogin，如果是的话就在这组页面里面添加一个新的页面，新建一个 MaterialPage ，设置一下 key，ValueKey 值是 AuthLogin，再设置一下 child ，值是 AuthLogin 这个小部件。

auth_login.dart

打开 auth_login.dart ，小部件的 build 方法 return 的东西可以用一个 Scaffold 小部件，设置一下它的 appBar，值是一个 AppBar，里面添加一个 title，值是一个 Text，文字是用户登录。再设置一下小部件的 body 属性，值是一个 AuthLoginForm。

测试

再测试一下，在用户页面，按一下这个请登录按钮，会打开用户登录页面。