基于vue3+vite5+pinia+ts写一个登录功能，要有登录校验，登录成功后设置Token

基于Vue 3、Vite 5、Pinia 和 TypeScript 构建一个登录功能，你可以按照以下步骤进行：

设置项目依赖：
首先你需要安装必要的依赖：
npm install -D vite@latest vite-plugin-vue2 typescript pinia vuex-persistedstate axios
登录后复制

初始化项目骨架：
使用Vite初始化项目，并启用TypeScript支持：
vite create my-app --template @vitejs/app --type ts
登录后复制

创建store和pinia：
在src/store目录下创建auth.js，用Pinia管理登录状态和token：
import { defineStore } from "pinia";

export const useAuthStore = defineStore("auth", {
state: () => ({
username: "",
password: "",
isLoggedIn: false,
token: null,
}),
actions: {
async login({ username, password }) {
try {
// 模拟API请求，实际应用中应调用真正的API服务
const response = await fetch("/api/login", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ username, password }),
});
const data = await response.json();
if (data.success) {
this.isLoggedIn = true;
this.token = data.token; // 存储token
} else {
this.errorMessage = data.message;
}
} catch (error) {
console.error("Error logging in:", error);
}
},
logout() {
this.isLoggedIn = false;
this.token = null;
},
},
getters: {
isLoggedIn() {
return this.isLoggedIn;
},
},
});
登录后复制

更新登录组件：
<template>
...
<button @click="handleSubmit">登录</button>
...
</template>

<script lang="ts">
import { computed, watch } from 'vue';
import { useAuthStore } from "@/store/auth";

export default {
setup() {
const authStore = useAuthStore();
const { username, password, isLoggedIn, errorMessage } = authStore;

// 添加登录校验和提交逻辑
const handleSubmit = async () => {
if (!username || !password) {
authStore.errorMessage = "请输入用户名和密码";
return;
}

await authStore.login({ username, password });

// 如果登录成功，可以在其他组件通过props获取token
// 并使用axios添加Authorization头
if (authStore.isLoggedIn) {
// 例如：
// window.localStorage.setItem("token", authStore.token);
// 在axios拦截器中设置token
// const axiosInstance = axios.create({
// baseURL: process.env.VUE_APP_API_URL,
// withCredentials: true,
// headers: { Authorization: `Bearer ${authStore.token}` },
// });
// axiosInstance.interceptors.request.use((config) => {
// config.headers.Authorization = `Bearer ${authStore.token}`;
// return config;
// });
}
};

// 登出逻辑
function logout() {
authStore.logout();
}

return {
username,
password,
isLoggedIn: computed(authStore.isLoggedIn),
errorMessage,
handleSubmit,
logout,
};
},
};
</script>
登录后复制

在路由守卫中验证token：
创建一个全局守卫如router.ts中检查是否有token：
import { RouteGuard, useRouter } from "@vue-router/runtime-core";
import { useAuthStore } from "@/store/auth";

export const requiresAuth: RouteGuard = async (to, from, next) => {
const router = useRouter();
const authStore = useAuthStore();

if (authStore.isLoggedIn) {
next();
} else {
router.push("/login");
}
};
登录后复制

现在你已经实现了基于Vue 3、Vite 5、Pinia和TypeScript的登录功能。当用户登录成功，token会在本地存储并在需要的地方添加至HTTP请求头。