kazpgmの日記

『プログラム自動作成@自動生成』作成の日記

フロント側を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