vue实现登录调用接口
Vue 登录接口调用实现
安装 axios
在项目中安装 axios 用于发送 HTTP 请求：
npm install axios创建 API 服务文件
在 src 目录下创建 api/auth.js 文件，封装登录接口：
import axios from 'axios';
const authApi = axios.create({
baseURL: 'https://your-api-endpoint.com/api',
timeout: 5000
});
export const login = (credentials) => {
return authApi.post('/login', credentials);
};登录组件实现
在 Vue 组件中调用接口（示例为 Login.vue）：
<template>
<form @submit.prevent="handleLogin">
<input v-model="username" placeholder="用户名"/>
<input v-model="password" type="password" placeholder="密码"/>
<button type="submit">登录</button>
</form>
</template>
<script>
import { login } from '@/api/auth';
export default {
data() {
return {
username: '',
password: ''
};
},
methods: {
async handleLogin() {
try {
const response = await login({
username: this.username,
password: this.password
});
localStorage.setItem('token', response.data.token);
this.$router.push('/dashboard');
} catch (error) {
alert('登录失败: ' + error.response?.data?.message || error.message);
}
}
}
};
</script>请求拦截器（可选）
在 auth.js 中添加拦截器处理请求头：
authApi.interceptors.request.use(config => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
});响应拦截器（可选）
处理通用错误响应：
authApi.interceptors.response.use(
response => response,
error => {
if (error.response.status === 401) {
localStorage.removeItem('token');
window.location.reload();
}
return Promise.reject(error);
}
);环境变量配置
在项目根目录创建 .env 文件：
VUE_APP_API_BASE_URL=https://your-api-endpoint.com/api修改 auth.js 中的 baseURL：
baseURL: process.env.VUE_APP_API_BASE_URLTypeScript 支持（可选）
为接口定义类型：
interface LoginCredentials {
username: string;
password: string;
}
interface LoginResponse {
token: string;
expiresIn: number;
}
