用户登录

用户登录成功以后,在用户页面上显示的这个用户名,是 authModel 里的 name 属性的值。打开调试,重新启动一下,然后再打开用户页面,这次页面上就不会显示 authModel 里的 name 的值了,因为它现在没有值。

应用启动以后,我们可以让应用读取登录成功以后存储在设备磁盘上的登录数据,然后恢复一下登录状态。先在这个 auth_model.dart 里面,定义一个方法,名字是 setAuth,方法接收一个 Auth 类型的参数,名字叫 auth,在方法里设置一下 userId ,它的值是 '${auth.id}',再设置一下 name,值是 auth.name, 然后设置的是 token ,让它等于 auth.token ,下面再执行一下 notifyListeners() 这个方法通知监听者。

app.dart

打开 app.dart,在小部件的状态类里面,声明一个属性,类型是 bool 名字叫 initializing ,默认值是 true,用它表示正在初始化。

下面定义一个方法,名字叫 initialize,用 async 标记一下,方法里面声明一个 prefs,值是 await,执行一下 SharedPreferences.getInstance() ,下面再声明一个 hasAuth,值是 prefs,用一下 containsKey,数据的名字叫 auth,检查这个名字的数据是否存在。

判断一下,如果 hasAuth,也就是如果在磁盘存储里找到了名字是 auth 的数据。可以再声明一个 auth,值是 Auth.fromJson,用 jsonDecode 处理一下 prefs.getString,名字叫 auth ,用这个 getString 方法得到名字是 auth 的这个数据的值。Auth 的 fromJson 工厂可以把一个 Map 数据转换成 Auth 类型的数据。

下面再执行一下 authModel 上面的 setAuth,把上面准备好的 auth 交给这个方法。最后可以再执行一下 setState ,把 initializing 设置成 false。

initState

再添加一个 initState 这个方法,在这里可以执行一下刚才定义的 initialize 这个方法。

build

在 build 方法里面,现在可以判断一下,initializing ,如果正在初始化,返回的小部件可以用一个 MaterialApp ,把 debugShowCheckedModeBanner 设置成 false,再给它的 home 提供一个 Scaffold 小部件,设置一下 Scaffold 的 body ,用一个 Center 小部件,child 是一个 Text ,文字是 初始化...

如果没在初始化,可以返回之前在这里添加的个小部件。

测试

打开调试,重新启动一下,然后再打开用户页面,你会发现这次在页面上仍然会显示之前成功登录以后的这个用户的名字。因为这次重启应用以后,会读取存储在设备磁盘上的 auth 数据,然后执行 authModel 里的 setAuth 方法恢复了一下。恢复以后,authModel 里的 userId ,name 还有 token 就又有值了。

应用启动以后恢复登录状态《 Flutter 2:状态管理(2) 》

统计

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

社会化网络

关于

微信订阅号

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