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_URL

TypeScript 支持（可选）

为接口定义类型：

interface LoginCredentials {
  username: string;
  password: string;
}

interface LoginResponse {
  token: string;
  expiresIn: number;
}