フロント側をFlutter(スマホ)Thymeleaf(PC)、バックエンド側SpringBootの自動作成勉強中
9:39
①今日は、ログアウトを作ろう。
・・・過去にメニュー画面にはログアウトボタンを付けて、動いていたが、全ての画面にログアウトボタンを付けるので、共通化しないといけないので。
19:37
①ログアウトができた。CommUtilsクラスにonSignOutComm共通メソッドを作って、どの画面からも呼べるようにした。
・・・なかなかasyncとawaitがうまくいかなかったり、setState(()をどうするかなど、あと、SpringSecurityのLogoutはステータス=302を返してきたりして、手間取った。多分これで大丈夫だと思う。
■Flutter側CommUtilsクラスにonSignOutComm共通メソッド
・CommUtils.dartから「onSignOutComm」を抜粋
/// 共通ログアウト処理 static Future<String> onSignOutComm(BuildContext _context, ScrollController _scrollController, Map<String, String> _headers, Map<String, String> _cookies) async { String _msg = ""; try { final url = Uri.parse("http://192.168.1.13:8080/logout?_csrf=${_cookies['XSRF-TOKEN']}"); http.Response response = await http.post(url, headers: _headers); if (response.statusCode != 302 && response.statusCode != 200 &&response.statusCode != 401 && response.statusCode != 403) { int statusCode = response.statusCode; _msg = "エラーが発生しました $statusCode"; // 画面を先頭に戻す _scrollController.animateTo(0, duration: const Duration(milliseconds:600), curve: Curves.easeInQuint); return _msg; } //最初のページ(ログイン画面)に戻る Navigator.popUntil(_context, (route) => route.isFirst); } on Exception catch (ex) { _msg = "エラーが発生しました"; } return _msg; }
■Flutter側スマホ画面・メニュー画面のログアウトボタン
・AppBarのログアウトボタンのみ抜粋
すべての画面で同じコーディングになるので、以降の画面ではソースを省略します。
appBar: AppBar( title: ・・・, actions: <Widget>[ IconButton( onPressed: () async { String? _msg = await CommUtils.onSignOutComm( context, _scrollController, widget.headers, widget.cookies); if (_msg != "") { setState(() { _errorSuccessMsg = _msg; }); } }, icon: const Icon(Icons.exit_to_app), ), ], ),
■Flutter側スマホ画面・登録画面のログアウトボタン
■Flutter側スマホ画面・一覧画面のログアウトボタン
■Flutter側スマホ画面・詳細画面のログアウトボタン
■Flutter側スマホ画面・更新画面のログアウトボタン
■ログアウト後の遷移画面(ログイン画面)
■2022/06/15に、勉強した成果:『Flutter_JavaSpringプログラム自動作成◎自動生成ツール』をVectorに載せました。Zenn本も書きました。使ってみての感想や間違いの指定や、こうやったほうがいいとかの情報があればメールください。
・Vector
www.vector.co.jp
・Zenn本(Flutter_JavaSpringプログラム自動作成)
zenn.dev