webappvue1/src/views/ILogin.vue

<template>
  <div class="auth-container">
    <div class="auth-box">
      <h2>{{ isLogin ? "登录你的账户" : "创建新账户" }}</h2>

      <form @submit.prevent="handleSubmit">
        <div v-if="isLogin" class="form-group">
          <label>用户名或邮箱</label>
          <input v-model="username" type="text" required />
        </div>

        <div v-if="isLogin" class="form-group">
          <label>密码</label>
          <input v-model="password" type="password" required />
        </div>

        <!-- 注册时额外字段 -->
        <!-- <div v-if="!isLogin" class="form-group">
          <label>确认密码</label>
          <input v-model="confirmPassword" type="password" required />
        </div> -->

        <button type="submit" class="btn-primary">
          {{ isLogin ? "登录" : "注册" }}
        </button>

      </form>

      <p class="switch-mode">
        {{ isLogin ? "没有账户？" : "已有账户？" }}
        <a href="#" @click.prevent="isLogin = !isLogin">
          {{ isLogin ? "注册" : "登录" }}
        </a>
      </p>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { connection, reconnectWithToken } from '@/network/signalr'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'


const isLogin = ref(true);
const username = ref("");
const password = ref("");
const confirmPassword = ref("");
const router = useRouter()

const userStore = useUserStore()

async function RegisterRequest() {
  const result = await connection.invoke("Register")
    .catch(err => console.error("注册请求失败:", err));
  if (result.Success) {
    isLogin.value = true; // 注册成功后切换到登录界面
    console.log("注册成功:", result.Username); // 这里result.message实际上是成功信息
    await LoginRequest(result.Username, result.Password); // 注册成功后自动登录
    return
  }
  console.error("注册失败:", result.Success); // 这里result.message实际上是错误信息
}

async function LoginRequest(username, password) {
  // 登录请求，获取访问令牌和刷新令牌
  const ua = navigator.userAgent // 获取用户代理字符串

  const platform = navigator.platform // 获取平台信息
  console.log("ua:", ua, "platform:", platform)
  const result = await connection.invoke("LoginAuthentication", username, password, ua + platform)
    .catch(err => console.error("登录请求失败:", err));
  if (result.Success) {
    localStorage.setItem("accessToken", result.AccessToken);
    localStorage.setItem("refreshToken", result.RefreshToken);
    console.log("登录成功:", result.AccessToken, "=========", result.RefreshToken);
    userStore.setUser(result);
    await reconnectWithToken();
    router.push("/"); // 登录成功后跳转到主界面 隐藏登录注册界面
    return
  }
  console.error("登录失败:", "用户名或密码错误!"); // 这里result.message实际上是错误信息
}

function handleSubmit() {
  if (!isLogin.value && password.value !== confirmPassword.value) {
    alert("两次密码不一致！");
    return;
  }
  if (isLogin.value) {
    LoginRequest(username.value, password.value);
  } else {
    RegisterRequest(username.value, password.value);
  }
}


</script>

<style scoped>
.auth-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #f3f2f1;
}

.auth-box {
  background: #fff;
  padding: 2rem;
  width: 350px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

h2 {
  margin-bottom: 1.5rem;
  color: #0078d4;
  /* 微软蓝 */
  text-align: center;
}

.form-group {
  margin-bottom: 1rem;
}

label {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 500;
}

input {
  width: 100%;
  padding: 0.6rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.btn-primary {
  width: 100%;
  padding: 0.8rem;
  background: #0078d4;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
}

.btn-primary:hover {
  background: #005a9e;
}

.switch-mode {
  margin-top: 1rem;
  text-align: center;
}

.switch-mode a {
  color: #0078d4;
  text-decoration: none;
  font-weight: 500;
}
</style>