vue axios 实现登录
安装 Axios
在 Vue 项目中安装 Axios 依赖：
npm install axios创建 Axios 实例
在 src 目录下创建 api 文件夹，并新建 axios.js 文件，配置基础请求实例：
import axios from 'axios';
const instance = axios.create({
baseURL: 'https://your-api-domain.com/api',
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 => {
if (error.response.status === 401) {
// 处理 token 过期或未授权
localStorage.removeItem('token');
window.location.href = '/login';
}
return Promise.reject(error);
}
);
export default instance;登录接口封装
在 api 文件夹下新建 auth.js，封装登录方法：
import axios from './axios';
export const login = (data) => {
return axios.post('/login', data);
};登录页面实现
在 Vue 组件中调用登录接口（以 Login.vue 为例）：
<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>
<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.data.token);
this.$router.push('/dashboard');
} catch (error) {
alert('登录失败: ' + error.message);
}
},
},
};
</script>路由守卫配置
在 router/index.js 中配置全局路由守卫，实现权限控制：
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token');
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login');
} else {
next();
}
});环境变量配置
在项目根目录创建 .env 文件，管理 API 基础地址：
VUE_APP_API_BASE_URL=https://your-api-domain.com/api修改 axios.js 中的 baseURL 为动态配置：
baseURL: process.env.VUE_APP_API_BASE_URL,
