当前位置：首页 > VUE

vue axios实现登录

2026-02-19 05:11:38VUE

安装 axios 依赖

在项目根目录下运行以下命令安装 axios：

npm install axios

创建 axios 实例

在 src 目录下新建 utils/request.js 文件，配置基础请求实例：

import axios from 'axios';

const service = axios.create({
  baseURL: 'https://your-api-domain.com', // 替换为实际接口地址
  timeout: 5000,
});

// 请求拦截器（添加token等）
service.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 响应拦截器（处理错误码等）
service.interceptors.response.use(
  (response) => {
    return response.data;
  },
  (error) => {
    if (error.response.status === 401) {
      // 处理未授权逻辑（如跳转登录页）
    }
    return Promise.reject(error);
  }
);

export default service;

编写登录 API

在 src/api 目录下创建 auth.js，定义登录接口：

import request from '@/utils/request';

export function login(data) {
  return request({
    url: '/login',
    method: 'post',
    data,
  });
}

实现登录页面逻辑

在登录组件中调用接口并处理结果：

import { login } from '@/api/auth';

export default {
  data() {
    return {
      form: {
        username: '',
        password: '',
      },
    };
  },
  methods: {
    handleLogin() {
      login(this.form)
        .then((res) => {
          localStorage.setItem('token', res.token);
          this.$router.push('/dashboard'); // 跳转到首页
        })
        .catch((error) => {
          console.error('登录失败:', error);
        });
    },
  },
};

模板部分示例

<template>
  <form @submit.prevent="handleLogin">
    <input v-model="form.username" placeholder="用户名" />
    <input v-model="form.password" type="password" placeholder="密码" />
    <button type="submit">登录</button>
  </form>
</template>

关键注意事项

确保后端接口支持跨域（或配置代理）
生产环境需使用 HTTPS 并启用 CSRF 防护
敏感数据（如 token）建议结合 Vuex 或 Pinia 管理

错误处理扩展

可根据业务需求在响应拦截器中补充逻辑：

vue axios实现登录

service.interceptors.response.use(
  (response) => {
    if (response.data.code !== 200) {
      return Promise.reject(new Error(response.data.message));
    }
    return response.data;
  }
);