基于vue3+vite5+pinia+axios+ts写一个登录功能，vue使用setup语法糖，要有登录校验，登录成功后设置Token

基于Vue3、Vite5、Pinia、Axios和TypeScript构建一个简单的登录功能，我们将使用`<script setup>`语法以及Vue Router的基本集成。首先，确保安装了所有依赖：

npm install vue@next vite@latest vite-plugin-pinia axios typescript

接下来，我们创建一个基本的Login组件：

<!-- login.vue -->
<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <label for="username">用户名</label>
      <input type="text" id="username" v-model="username" required/>

      <label for="password">密码</label>
      <input type="password" id="password" v-model="password" required/>

      <button type="submit">登录</button>
    </form>

    <p v-if="message">{{ message }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useStore } from 'pinia';
import axios from 'axios';

const store = useStore();
let username = ref('');
let password = ref('');

async function handleSubmit(event) {
  event.preventDefault();

  const response = await axios.post('/api/login', { username: username.value, password: password.value });

  if (response.data.success) {
    // 设置token到store或其他全局存储地方
    store.state.token = response.data.token;
    // 刷新路由或导航到受保护页面
    router.push('/dashboard');
    // 清空输入框并显示消息
    username.value = '';
    password.value = '';
    setErrorMessage('');
  } else {
    setErrorMessage(response.data.message);
  }
}

function setErrorMessage(error: string) {
  // 更新错误信息
  store.commit('updateMessage', error);
}
</script>

<style scoped>
/* 添加一些基本样式 */
</style>

在这个例子中，我们使用了`ref`管理表单输入，并通过`axios`发送POST请求到服务器进行登录验证。如果登录成功，我们会在store中保存token，并导航到dashboard页面。同时，我们会清除输入框并更新错误信息。

在store文件中（假设名为`store.ts`），添加相应的状态和mutation：

// store/store.ts
export interface State {
  token?: string;
  message?: string;
}

export default defineStore('auth', {
  state() {
    return {
      token: null,
      message: '',
    };
  },
  mutations: {
    updateMessage(state, message: string) {
      state.message = message;
    },
  },
});

这只是一个基础的示例，实际项目中你可能需要处理更复杂的错误处理、身份验证中间件以及更安全地存储和使用token。记得按照Vite的配置文件（如`vite.config.js`）调整路由和Vue的生命周期钩子。