当前位置：首页 > VUE

vue 使用axios实现登录

2026-01-21 05:29:23VUE

安装axios

在Vue项目中安装axios依赖，可以通过npm或yarn进行安装：

npm install axios
# 或
yarn add axios

配置axios实例

在src目录下创建utils/request.js文件，配置axios的基地址和拦截器：

import axios from 'axios'

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

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 可在发送请求前处理逻辑（如添加token）
    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 => {
    return Promise.reject(error)
  }
)

export default service

创建登录API

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

import request from '@/utils/request'

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

实现登录组件

在登录组件中调用登录接口：

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

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

export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    handleLogin() {
      login(this.form).then(response => {
        // 登录成功处理
        localStorage.setItem('token', response.data.token)
        this.$router.push('/dashboard')
      }).catch(error => {
        console.error('登录失败:', error)
      })
    }
  }
}
</script>

路由配置

确保配置了登录后的跳转路由（通常在router/index.js中）：

const routes = [
  {
    path: '/login',
    component: () => import('@/views/Login.vue')
  },
  {
    path: '/dashboard',
    component: () => import('@/views/Dashboard.vue'),
    meta: { requiresAuth: true }
  }
]

全局路由守卫

添加路由守卫实现登录状态验证：

router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token')
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!token) {
      next('/login')
    } else {
      next()
    }
  } else {
    next()
  }
})

错误处理增强

建议在拦截器中添加更完善的错误处理逻辑：

vue 使用axios实现登录

service.interceptors.response.use(
  response => {
    if (response.data.code !== 200) {
      return Promise.reject(new Error(response.data.message || 'Error'))
    }
    return response.data
  },
  error => {
    if (error.response.status === 401) {
      // 处理token过期等情况
      localStorage.removeItem('token')
      router.push('/login')
    }
    return Promise.reject(error)
  }
)