vue axios实现登录源码
安装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地址
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(res => {
localStorage.setItem('token', res.token)
this.$router.push('/dashboard')
}).catch(error => {
console.error('登录失败:', error)
})
}
}
}
</script>路由守卫配置
在src/router/index.js中添加路由守卫：
router.beforeEach((to, from, next) => {
const token = localStorage.getItem('token')
if (to.meta.requiresAuth && !token) {
next('/login')
} else {
next()
}
})错误处理优化
在utils/request.js中完善错误处理：
service.interceptors.response.use(
response => {
const res = response.data
if (res.code !== 200) {
return Promise.reject(new Error(res.message || 'Error'))
}
return res
},
error => {
if (error.response.status === 401) {
// 处理未授权情况
localStorage.removeItem('token')
window.location.reload()
}
return Promise.reject(error)
}
)环境变量配置
在项目根目录创建.env.development和.env.production文件：
# .env.development
VUE_APP_BASE_API=/api# .env.production
VUE_APP_BASE_API=https://production-api.com修改request.js中的baseURL：
baseURL: process.env.VUE_APP_BASE_API
