add logout && fix theme

2026-07-12 16:01:35 +08:00 · 2023-06-24 17:26:00 +08:00
parent db40e4a800
commit 4a6cde67b3
5 changed files with 152 additions and 166 deletions
--- a/src/pages/[...all].vue
+++ b/src/pages/[...all].vue
@@ -1,52 +1,34 @@
 <script setup lang="ts">
-import misc404 from '@images/pages/404.png'
-import miscMaskDark from '@images/pages/misc-mask-dark.png'
-import miscMaskLight from '@images/pages/misc-mask-light.png'
-import tree from '@images/pages/tree.png'
-import { useTheme } from 'vuetify'
+import misc404 from "@images/pages/404.png";
+import miscMaskDark from "@images/pages/misc-mask-dark.png";
+import miscMaskLight from "@images/pages/misc-mask-light.png";
+import tree from "@images/pages/tree.png";
+import { useTheme } from "vuetify";

-const vuetifyTheme = useTheme()
+const vuetifyTheme = useTheme();
 const authThemeMask = computed(() => {
-  return vuetifyTheme.global.name.value === 'light'
-    ? miscMaskLight
-    : miscMaskDark
-})
+  return vuetifyTheme.global.name.value === "light" ? miscMaskLight : miscMaskDark;
+});
 </script>

 <template>
  <div class="misc-wrapper">
    <ErrorHeader
      error-code="404"
-      error-title="Page Not Found ⚠️"
-      error-description="We couldn't find the page you are looking for."
+      error-title="页面不存在 ⚠️"
+      error-description="您想要访问的页面不存在，请检查地址是否正确."
    />

    <!-- 👉 Image -->
    <div class="misc-avatar w-100 text-center">
-      <VImg
-        :src="misc404"
-        alt="Coming Soon"
-        :max-width="800"
-        class="mx-auto"
-      />
-      <VBtn
-        to="/"
-        class="mt-10"
-      >
-        Back to Home
-      </VBtn>
+      <VImg :src="misc404" alt="Coming Soon" :max-width="800" class="mx-auto" />
+      <VBtn to="/" class="mt-10"> 返回 </VBtn>
    </div>

    <!-- 👉 Footer -->
-    <VImg
-      :src="tree"
-      class="misc-footer-tree d-none d-md-block"
-    />
+    <VImg :src="tree" class="misc-footer-tree d-none d-md-block" />

-    <VImg
-      :src="authThemeMask"
-      class="misc-footer-img d-none d-md-block"
-    />
+    <VImg :src="authThemeMask" class="misc-footer-img d-none d-md-block" />
  </div>
 </template>

--- a/src/pages/login.vue
+++ b/src/pages/login.vue
@@ -1,77 +1,77 @@
 <script setup lang="ts">
-import { useTheme } from 'vuetify'
+import { useTheme } from "vuetify";

-import api from '@/api'
-import router from '@/router'
-import logo from '@images/logo.svg?raw'
-import authV1MaskDark from '@images/pages/auth-v1-mask-dark.png'
-import authV1MaskLight from '@images/pages/auth-v1-mask-light.png'
-import authV1Tree2 from '@images/pages/auth-v1-tree-2.png'
-import authV1Tree from '@images/pages/auth-v1-tree.png'
+import api from "@/api";
+import router from "@/router";
+import logo from "@images/logo.svg?raw";
+import authV1MaskDark from "@images/pages/auth-v1-mask-dark.png";
+import authV1MaskLight from "@images/pages/auth-v1-mask-light.png";
+import authV1Tree2 from "@images/pages/auth-v1-tree-2.png";
+import authV1Tree from "@images/pages/auth-v1-tree.png";

 const form = ref({
-  username: '',
-  password: '',
+  username: "",
+  password: "",
  remember: true,
-})
+});

-const vuetifyTheme = useTheme()
+const vuetifyTheme = useTheme();

 const authThemeMask = computed(() => {
-  return vuetifyTheme.global.name.value === 'light'
-    ? authV1MaskLight
-    : authV1MaskDark
-})
+  return vuetifyTheme.global.name.value === "light" ? authV1MaskLight : authV1MaskDark;
+});

-const isPasswordVisible = ref(false)
-const errorMessage = ref('')
+const isPasswordVisible = ref(false);
+const errorMessage = ref("");

 // 登录获取token事件
 const login = () => {
-  errorMessage.value = ''
+  errorMessage.value = "";
  if (!form.value.username || !form.value.password) {
-    errorMessage.value = '请输入用户名和密码'
-    return
+    errorMessage.value = "请输入用户名和密码";
+    return;
  }
  // 用户名密码
  const formData = new FormData();
-  formData.append('username', form.value.username);
-  formData.append('password', form.value.password);
+  formData.append("username", form.value.username);
+  formData.append("password", form.value.password);
  // 请求token
-  api.post('/login/access-token', formData)
-  .then((response: { access_token: string }) => {
-    // 获取token
-    const token = response.access_token
-    // 将token保存在本地存储中，用于后续请求
-    localStorage.setItem('token', token)
-    // 跳转到首页
-    router.push('/')
-  })
-  .catch((error: any) => {
-    // 登录失败，显示错误提示
-    if (!error.response) {
-      errorMessage.value = '登录失败，请检查网络连接'
-    } else if (error.response.status === 401) {
-      errorMessage.value = '登录失败，请检查用户名和密码是否正确'
-    } else if (error.response.status === 403) {
-      errorMessage.value = '登录失败，您没有权限访问'
-    } else if (error.response.status === 500) {
-      errorMessage.value = '登录失败，服务器错误'
-    } else {
-      errorMessage.value = `登录失败 ${error.response.status}，请检查用户名和密码是否正确`
-    }
-  })
-}
-
+  api
+    .post("/login/access-token", formData, {
+      headers: {
+        Accept: "application/json", // 设置 Accept 类型
+      },
+    })
+    .then((response: any) => {
+      // 获取token
+      const token = response.access_token;
+      // 将token保存在本地存储中，用于后续请求
+      localStorage.setItem("token", token);
+      //保存保持登录状态
+      localStorage.setItem("remember", form.value.remember.toString());
+      // 跳转到首页
+      router.push("/");
+    })
+    .catch((error: any) => {
+      // 登录失败，显示错误提示
+      if (!error.response) {
+        errorMessage.value = "登录失败，请检查网络连接";
+      } else if (error.response.status === 401) {
+        errorMessage.value = "登录失败，请检查用户名和密码是否正确";
+      } else if (error.response.status === 403) {
+        errorMessage.value = "登录失败，您没有权限访问";
+      } else if (error.response.status === 500) {
+        errorMessage.value = "登录失败，服务器错误";
+      } else {
+        errorMessage.value = `登录失败 ${error.response.status}，请检查用户名和密码是否正确`;
+      }
+    });
+};
 </script>

 <template>
  <div class="auth-wrapper d-flex align-center justify-center pa-4">
-    <VCard
-      class="auth-card pa-4 pt-7"
-      max-width="448"
-      min-width="448"
-    >
+    <VCard class="auth-card pa-4 pt-7" max-width="448" min-width="448">
      <VCardItem class="justify-center">
        <template #prepend>
          <div class="d-flex">
@@ -85,12 +85,8 @@ const login = () => {
      </VCardItem>

      <VCardText class="pt-2">
-        <h5 class="text-h5 font-weight-semibold mb-1">
-          欢迎使用 MoviePilot! 👋🏻
-        </h5>
-        <p class="mb-0">
-          请输入用户名密码登录
-        </p>
+        <h5 class="text-h5 font-weight-semibold mb-1">欢迎使用 MoviePilot! 👋🏻</h5>
+        <p class="mb-0">请输入用户名密码登录</p>
      </VCardText>

      <VCardText>
@@ -98,12 +94,7 @@ const login = () => {
          <VRow>
            <!-- username -->
            <VCol cols="12">
-              <VTextField
-                v-model="form.username"
-                label="用户名"
-                type="text"
-                required
-              />
+              <VTextField v-model="form.username" label="用户名" type="text" required />
            </VCol>

            <!-- password -->
@@ -112,7 +103,9 @@ const login = () => {
                v-model="form.password"
                label="密码"
                :type="isPasswordVisible ? 'text' : 'password'"
-                :append-inner-icon="isPasswordVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
+                :append-inner-icon="
+                  isPasswordVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'
+                "
                @click:append-inner="isPasswordVisible = !isPasswordVisible"
                required
              />
@@ -121,20 +114,11 @@ const login = () => {

              <!-- remember me checkbox -->
              <div class="d-flex align-center justify-space-between flex-wrap mt-1 mb-4">
-                <VCheckbox
-                  v-model="form.remember"
-                  label="保持登录"
-                  required
-                />
+                <VCheckbox v-model="form.remember" label="保持登录" required />
              </div>

              <!-- login button -->
-              <VBtn
-                block
-                type="submit"
-              >
-                登录
-              </VBtn>
+              <VBtn block type="submit"> 登录 </VBtn>
            </VCol>
          </VRow>
        </VForm>
@@ -154,10 +138,7 @@ const login = () => {
    />

    <!-- bg img -->
-    <VImg
-      class="auth-footer-mask d-none d-md-block"
-      :src="authThemeMask"
-    />
+    <VImg class="auth-footer-mask d-none d-md-block" :src="authThemeMask" />
  </div>
 </template>