当前位置：首页 > VUE

vue axios 实现登录

2026-01-17 20:28:11VUE

Vue 中使用 Axios 实现登录功能

安装 Axios

在项目中安装 Axios 依赖：

npm install axios

创建 Axios 实例

在 src 目录下创建 api 文件夹，并新建 axios.js 文件：

import axios from 'axios'

const instance = axios.create({
  baseURL: 'http://your-api-base-url.com',
  timeout: 5000
})

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

// 响应拦截器
instance.interceptors.response.use(
  response => {
    return response.data
  },
  error => {
    return Promise.reject(error)
  }
)

export default instance

创建登录 API

在 api 文件夹下创建 auth.js：

import request from './axios'

export const login = (data) => {
  return request({
    url: '/login',
    method: 'post',
    data
  })
}

创建登录页面组件

创建 Login.vue 组件：

<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <input v-model="form.username" type="text" placeholder="Username">
      <input v-model="form.password" type="password" placeholder="Password">
      <button type="submit">Login</button>
    </form>
  </div>
</template>

<script>
import { login } from '@/api/auth'

export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    async handleSubmit() {
      try {
        const res = await login(this.form)
        localStorage.setItem('token', res.token)
        this.$router.push('/dashboard')
      } catch (error) {
        console.error('Login failed:', error)
      }
    }
  }
}
</script>

路由配置

在 router/index.js 中配置登录路由：

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/Login.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: Login
    }
  ]
})

状态管理（可选）

如需使用 Vuex 管理登录状态，可创建 store 模块：

// store/modules/auth.js
export default {
  state: {
    token: localStorage.getItem('token') || ''
  },
  mutations: {
    SET_TOKEN(state, token) {
      state.token = token
      localStorage.setItem('token', token)
    }
  },
  actions: {
    login({ commit }, credentials) {
      return login(credentials).then(res => {
        commit('SET_TOKEN', res.token)
        return res
      })
    }
  }
}

请求封装优化

可添加全局错误处理和 loading 状态：

vue axios 实现登录

// 在 axios.js 中添加
instance.interceptors.response.use(
  response => {
    return response.data
  },
  error => {
    if (error.response.status === 401) {
      // 处理未授权
      router.push('/login')
    }
    return Promise.reject(error)
  }
)

以上实现涵盖了 Vue 中使用 Axios 进行登录功能的主要环节，包括请求封装、API 管理、组件实现和状态存储。根据实际项目需求，可进一步扩展错误处理、表单验证等功能。