vue axios实现登录
安装 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 管理
错误处理扩展
可根据业务需求在响应拦截器中补充逻辑：
service.interceptors.response.use(
(response) => {
if (response.data.code !== 200) {
return Promise.reject(new Error(response.data.message));
}
return response.data;
}
);
