perf: improve error message of login (#851)

#### What type of PR is this?

/kind improvement

#### What this PR does / why we need it:

改进登录异常的提示信息，目前大致分为三种：

1. 用户名或密码错误
2. 跨域或网络请求异常
3. CSRF Token 失效

#### Which issue(s) this PR fixes:

Fixes https://github.com/halo-dev/halo/issues/3291

#### Screenshots:

<img width="1402" alt="image" src="https://user-images.githubusercontent.com/21301288/218319203-19517ab7-7740-41f9-8579-f10a60aa6e51.png">
<img width="1673" alt="image" src="https://user-images.githubusercontent.com/21301288/218319221-2fc332f4-4de7-4417-a277-0c4a396d6389.png">


#### Special notes for your reviewer:

测试方式：

1. 进入浏览器控制台清理 Cookie，以测试 CSRF Token 失效的情况。
2. 使用 3000 端口访问 Console，以测试跨域的情况。
3. 观察以上两种情况的登录请求异常提示信息是否符合要求。

#### Does this PR introduce a user-facing change?

```release-note
优化 Console 端登录请求异常的提示
```

src/components/login/LoginForm.vue

@@ -3,6 +3,7 @@ import { setFocus } from "@/formkit/utils/focus";
 import { useUserStore } from "@/stores/user";
 import { randomUUID } from "@/utils/id";
 import axios from "axios";
+import { AxiosError } from "axios";
 import { Toast, VButton } from "@halo-dev/components";
 import { onMounted, ref } from "vue";
 import qs from "qs";
@@ -54,9 +55,26 @@ const handleLogin = async () => {
     localStorage.setItem("logged_in", "true");
 
     emit("succeed");
-  } catch (e) {
+  } catch (e: unknown) {
     console.error("Failed to login", e);
-    Toast.error("登录失败，用户名或密码错误");
+
+    if (e instanceof AxiosError) {
+      if (/Network Error/.test(e.message)) {
+        Toast.error("网络错误，请检查网络连接");
+        return;
+      }
+
+      if (e.response?.status === 403) {
+        Toast.warning("CSRF Token 失效，请重新尝试", { duration: 5000 });
+        handleGenerateToken();
+        return;
+      }
+
+      Toast.error("登录失败，用户名或密码错误");
+    } else {
+      Toast.error("未知异常");
+    }
+
     loginForm.value.password = "";
     setFocus("passwordInput");
   } finally {