用户登录

打开 post_index_model.dart,在这里有个 getPosts 方法,这个方法会用 http 客户端请求内容列表接口,现在我想在这个方法里使用 AppService 里的 apiHttpClient 发送请求,因为使用这个客户端发送请求,如果用户登录了,会在请求里包含用户的令牌,这样服务端就可以根据这个令牌判断当前请求的这个用户是谁了。

先改造一下这个 PostIndexModel,声明一个属性,类型是 AppService 名字是 appService 。然后再添加一个构造方法,PostIndexModel ,添加两个带名字的参数,用 required 标记一下,名字是 this.appService,再添加一个 this.posts。

找到 getPosts 方法,这里现在用的是 http 上面的 get 方法发送的这个请求,现在可以把它换成 appService.apiHttpClient 里的 get 发送这个请求。

post_provider.dart

打开 post_provider.dart,修改一下 postIndexProvider,换成一个 ChangeNotifierProxyProvider,第一个类型是 AppService,第二个类型是 PostIndexModel。设置一下 create 参数,这个方法支持一个 context 参数,返回的东西是一个 PostIndexModel,设置一下 appService,值是 context.read() 方法,类型是 AppService。

下面再设置一下 update,三个参数,context,appService,还有 postIndexModel, 这个方法 return 的东西是一个 PostIndexModel,设置一下它的 appService 参数,值是 appService,再设置一下 posts 参数,值是 postIndexModel 里的 posts 属性的值。

测试

打开调试,注意内容列表里第一个内容的点赞状态的变化,重新启动一下。 你会发现,第一个内容项目的点赞状态是实心的,说明当前用户赞过这个内容。第二个内容项目的点赞状态是空心的,说明当前用户没赞过这个内容。

因为现在发送请求用的客户端是我们自己定义的,它会在请求的头部里包含当前用户的令牌,这样服务端应用也就知道这个用户是谁了,给出的响应里面会包含当前用户对内容的点赞状态。

注意你可能暂时看不到这个点赞状态的变化,因为你当前用的这个用户,目前还没有赞过任何的内容。可以这样测试一下,在 Insomnia,配置一个请求,用 GET 请求 posts 这个地址,记住第一个内容项目的 id,我这里是 56,也就是在这里显示的第一个内容项目。

再配置一个登录请求,方法选择 POST,地址是 login,配置一个请求主体,类型是 JSON,里面设置一下 name 还有 password,也就是登录的用户名还有密码,这里用你之前申请的用户登录就行。复制一下请求回来的这个 token 的值。

再配置一个请求,不需要请求主体,请求方法仍然是 POST,地址是 posts/ 后面加上内容的 id,比如 56,后面再加上 /like,发送一下请求,提示请先登录,配置一下身份验证,类型是 Bearer token,把之前复制的令牌粘贴到这里。重新发送一下这个请求,这次提示服务出了点问题,因为我用的这个用户之前赞过这个内容。

这里我们可以取消点赞这个内容,把请求用的方法换成 DELETE,再发送一下这个请求。回到模拟器测试一下,观察第一个内容项目的点赞状态。打开一个页面,再回到发现这个页面,你会发现,这次就显示当前用户目前还没有赞过这个内容。

回到 Insomnia,把这个请求用的方法再换成 POST,发送一下这个请求。然后回到模拟器,打开一个页面,再重新回到发现页面。这次会显示当前用户赞过这个内容。

改造 PostIndexModel 用 apiHttpClient 发送请求《 Flutter 2:状态管理(2) 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点