基于Vue3、Vite5、Pinia、Axios和TypeScript构建一个简单的登录功能，使用<script setup>语法以及Vue Router的基本集成，登录成功后设置token

当你基于 Vue3、Vite5、Pinia、Axios 和 TypeScript 构建一个简单的登录功能时，首先需要确保你已经安装了必要的依赖，比如 `vue`, `@vue/cli`, `vite`, `pinia`, `axios` 和 `typescript`。以下是基本步骤：

1. **项目初始化**:
使用 Vite 创建一个新的 Vue 项目：

   vue create my-project --template vite
   cd my-project
   npm install axios typescript @vue/typescript/pinia --save

2. **配置 tsconfig.json**:
配置 TypeScript 编译选项，例如启用 strict 模式：

   {
     "compilerOptions": {
       "target": "esnext",
       "module": "esnext",
       "strict": true,
       "jsx": "preserve"
     }
   }

3. **创建 Pinia store**:
初始化并创建一个 Pinia store 来管理用户的登录状态：

   // src/store/index.ts
   import { defineStore } from 'pinia';

   export const useAuthStore = defineStore('auth', {
     state: () => ({
       user: null,
       token: ''
     }),
     actions: {
       login({ username, password }, commit) {
         axios.post('/api/login', { username, password })
           .then(response => {
             commit('setUser', response.data.user);
             localStorage.setItem('token', response.data.token);
           });
       },
       setUser(user) {
         this.user = user;
       },
       setToken(token) {
         this.token = token;
       }
     },
     getters: {
       isLoggedIn() {
         return !!this.user && this.token !== '';
       }
     }
   });

4. **<script setup> 文件**:
在组件中使用 `<script setup>`，注入 store，并实现登录功能和导航逻辑：

   <!-- src/components/Login.vue -->
   <template>
     <div>
       <form @submit.prevent="handleSubmit">
         <input type="text" v-model="username" placeholder="用户名">
         <input type="password" v-model="password" placeholder="密码">
         <button type="submit">登录</button>
       </form>
       {#if isLoggedIn}
         <p>已登录！</p>
       {:else}
         <router-link to="/dashboard">去仪表盘</router-link>
       {/if}
     </div>
   </template>

   <script lang="ts">
   import { ref, onMounted } from 'vue';
   import { useAuthStore } from './store';

   const authStore = useAuthStore();

   const username = ref('');
   const password = ref('');

   async function handleSubmit(event) {
     event.preventDefault();
     await authStore.login(username.value, password.value);
   }

   onMounted(() => {
     if (localStorage.getItem('token')) {
       authStore.setToken(localStorage.getItem('token'));
     }
   });

   </script>

5. **Vue Router 集成**:
安装和配置路由，添加一个 `Dashboard` 组件，只有登录用户才能访问：

   // src/router/index.js
   import { createRouter, createWebHistory, Route } from 'vue-router';
   import Dashboard from './views/Dashboard.vue';
   import Login from './components/Login.vue';

   export default createRouter({
     history: createWebHistory(),
     routes: [
       {
         path: '/login',
         component: Login,
       },
       {
         path: '/dashboard',
         name: 'dashboard',
         component: Dashboard,
         meta: { requiresAuth: true },
       },
       // 其他路由...
     ]
   });
   
   // 在 Login 组件内添加导航守卫

6. **添加导航守卫**:

   // src/App.vue 或者相应的导航守卫文件
   import useAuthStore from '../store';

   export default {
     async beforeRouteEnter(to, from, next) {
       const auth = useAuthStore();
       if (to.meta.requiresAuth && !auth.isLoggedIn()) {
         next({ path: '/login' });
       } else {
         next();
       }
     }
   };

现在你已经有了一个基础的登录功能，当用户登录成功后，会将 token 存储到 localStorage 中，并在需要的地方检查登录状态。如果未登录，则会自动重定向到登录页面。