vue 使用axios实现登录
安装 axios
在 Vue 项目中安装 axios 依赖：
npm install axios创建 axios 实例
在 src 目录下创建 utils/request.js 文件，配置 axios 实例：
import axios from 'axios'
const service = axios.create({
baseURL: 'https://your-api-domain.com', // 替换为实际 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
})
}实现登录组件
创建登录组件 Login.vue：
<template>
<div>
<form @submit.prevent="handleLogin">
<input v-model="form.username" placeholder="用户名"/>
<input v-model="form.password" type="password" placeholder="密码"/>
<button type="submit">登录</button>
</form>
</div>
</template>
<script>
import { login } from '@/api/auth'
export default {
data() {
return {
form: {
username: '',
password: ''
}
}
},
methods: {
async handleLogin() {
try {
const res = await login(this.form)
localStorage.setItem('token', res.token)
this.$router.push('/dashboard')
} catch (error) {
alert('登录失败')
}
}
}
}
</script>路由配置
在路由文件中添加登录路由（通常为 src/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
}
]
})处理 Token 过期
可以在响应拦截器中添加 token 过期处理：
service.interceptors.response.use(
response => {
return response.data
},
error => {
if (error.response.status === 401) {
localStorage.removeItem('token')
router.push('/login')
}
return Promise.reject(error)
}
)环境变量配置
建议将 API 地址等配置放入环境变量（.env 文件）：
VUE_APP_BASE_API=https://your-api-domain.com然后修改 request.js 中的 baseURL：
baseURL: process.env.VUE_APP_BASE_API
