Spring Boot学習②～ログイン成功時・失敗時の処理～

前→https://qiita.com/19960417akiho/items/3fa636e6a26c371bcaa8

以下の動画を参考に、ハンズオン形式でSpring BootでWebアプリを制作していきます。

https://www.youtube.com/watch?v=RbrCJYm82lQ&list=PLD6WyeaFzSSbS0q1unoPpBpnBNyzPWo3j&index=7

今回はPart6。
正しいペアのIDとパスワードを入力した際にはトップメニュー画面に遷移し、
誤ったペアのIDとパスワードを入力した際は、ログイン画面にその旨をテキストで表示します。

まずはトップメニュー画面のhtmlとコントローラーを用意します。

# menu.html＆MenuControler.java

```menu.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>トップメニュー</title>
</head>
<body>
トップメニューだよ
</body>
</html>
```

```MenuControler.java
@Controller
public class MenuController {
	@GetMapping("/menu")
	public String view(){
		return "menu";
	}
}
```

`/menu`にアクセスがあった際はmenu.htmlを表示するような設定です。

次に、LoginControllerを変更して、IDとパスが一致したとき、そうでないときの動きを実装しましょう。

# LoginController.java

```LoginController.java
@Controller
public class LoginController {
	
	private static final String LOGIN_ID = "user";
	private static final String PASSWORD = "pwd";
	

	@GetMapping("/login")
	public String view(Model model, LoginForm form) {
		
		return "login"; //login.htmlをする
	}
	
	@PostMapping("/login")
	public String login(Model model, LoginForm form) {
		var isCorrectUserAuth = form.getLoginId().equals(LOGIN_ID)&&form.getPassword().equals(PASSWORD);
		if(isCorrectUserAuth) {
			return "redirect:/menu";
		}else {
			model.addAttribute("errorMsg","IDとPASSの組み合わせが間違っています。");
			return "login";
		}
	}
}
```

前回は入力された値をコンソールに出力するだけでしたが、今回はその値をあらかじめ用意した定数と比較して、正誤の判断をします。

今回仮で設定した定数は以下です。本当はDBから引っ張ってきて確認しますが、本題はそこではないので簡易Verです。
```LoginController.java
	private static final String LOGIN_ID = "user";
	private static final String PASSWORD = "pwd";
```

ログイン時の挙動は以下です。
```LoginController.java
@PostMapping("/login")
	public String login(Model model, LoginForm form) {
		var isCorrectUserAuth = form.getLoginId().equals(LOGIN_ID)&&form.getPassword().equals(PASSWORD);
		if(isCorrectUserAuth) {
			return "redirect:/menu";
		}else {
			model.addAttribute("errorMsg","IDとPASSの組み合わせが間違っています。");
			return "login";
		}
	}
```

`isCorrectUserAuth`はboolean型の変数となります。

`getLoginId()`と`getPassword()`なんて定義した覚えないよ！
となりますが、これまた@Dataのおかげで、`loginId`と`password`という変数を用意したときに、自動的にその変数に対するゲッターとセッターが同一クラス内に用意されます。

`getLoginId()`とLが大文字になっているのは、Javaの命名規則に従って自動的に大文字に変換されているからです。

なので、`form`の`loginId`と`password`がそれぞれ`LOGIN_ID`・`PASSWORD`と一致した場合は、`isCorrectUserAuth`は`true`となり、そうでない場合は`false`となります。

if文以下はログイン成功時と失敗時の分岐です。

まず成功時。（`isCorrectUserAuth`は`true`）
```LoginController.java
return "redirect:/menu";
 ```
 `menu.html`にリダイレクトします。

 次に失敗時。（`isCorrectUserAuth`は`false`）
 ```LoginController.java
			model.addAttribute("errorMsg","IDとPASSの組み合わせが間違っています。");
			return "login";
 ```

 `model`というオブジェクトに`errorMsg`というキーと「IDと～」という値を追加しています。

 そもそも `model`ってなんやねんって思いますよね、私も思ってのでChatGPTに聞きました。

 >modelはModel型のオブジェクトの名前ってことであってる？	
 ChatGPT:
 はい、その通りです。modelはModel型のオブジェクトを指します。Model型はSpring Frameworkが提供するクラスで、ビューとコントローラー間でデータをやり取りするために使用されます。コントローラーからビューにデータを渡す際に、Modelオブジェクトを使用してデータを保持し、ビューに渡します。
通常、Spring MVCのコントローラーメソッドの引数としてModel型のパラメータを指定することで、Springが自動的にModelオブジェクトを作成し、それをコントローラーメソッドに渡してくれます。そして、コントローラーはこのModelオブジェクトを使用してデータをビューに渡します。

なるほど、Springがあらかじめ用意してくれているクラスのようです。

要は、コントローラーに`model`という空箱（コンテナ）を用意し、そこに入れたデータを画面側（今回でいうと`login.html`）に反映することができるということですね。
javaとhtmlの架け橋的存在です。

コントローラー側でその空箱にデータを追加するときのメソッドが`addAttribute()`で、これはキーと値というセットで`model`にデータを追加します。

return以下で`model`にデータを追加した後に、再び`login.html`がされます。

このままでは、`model`にデータが追加されただけで、html側にそれが表示されるようにはなっていません。
最後に`login.html`を変更しましょう。

# login.html

```login.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>ログイン画面</title>
</head>
<body>
	<h2>ログイン画面だよ</h2>
	<span th:text="${errorMsg}"></span>
	<form th:action="@{/login}" method="post" th:object="${loginForm}">
		<div>
			<label>ログインID</label>
			<input type="text" th:field="*{loginId}">
		</div>
		<div>
			<label>パスワード</label>
			<input type="password" th:field="*{password}">
		</div>
		<div>
			<input type="submit" value="ログイン">
		</div>
	</form>
</body>
</html>
```

変更が加わった部分は以下の2行目です。

```login.html
	<h2>ログイン画面だよ</h2>
	<span th:text="${errorMsg}"></span>
	<form th:action="@{/login}" method="post" th:object="${loginForm}">
```

今回は`errorMsg`に「IDと～」という値がはいっているので、その部分が表示されます。
このようにして、コントローラーで用意したデータをビューに提供することができます。

次→https://qiita.com/19960417akiho/items/2aa16ce876c4937b0cc3