vue axios实现登录
安装 axios 依赖
在 Vue 项目中安装 axios 依赖包，可以通过 npm 或 yarn 进行安装。
npm install axios
# 或
yarn add axios创建 axios 实例
在 src 目录下新建 utils/http.js 文件，配置 axios 实例，设置基础 URL 和拦截器。
import axios from 'axios';
const http = axios.create({
baseURL: 'https://your-api-domain.com/api', // 替换为实际 API 地址
timeout: 5000,
});
// 请求拦截器
http.interceptors.request.use(
(config) => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
(error) => {
return Promise.reject(error);
}
);
// 响应拦截器
http.interceptors.response.use(
(response) => {
return response.data;
},
(error) => {
if (error.response.status === 401) {
// 处理未授权错误，例如跳转到登录页
}
return Promise.reject(error);
}
);
export default http;创建登录 API 方法
在 src/api/auth.js 中定义登录接口方法。
import http from '../utils/http';
export const login = (data) => {
return http.post('/login', data);
};在 Vue 组件中调用登录
在登录组件中引入 API 方法，并处理用户输入和登录逻辑。
<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.token);
this.$router.push('/dashboard'); // 登录成功后跳转
} catch (error) {
alert('登录失败，请检查用户名和密码');
}
},
},
};
</script>处理 Token 存储和路由守卫
在 src/router/index.js 中配置路由守卫，检查用户是否已登录。
import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/views/Home.vue';
import Login from '@/views/Login.vue';
Vue.use(Router);
const router = new Router({
routes: [
{ path: '/', component: Home, meta: { requiresAuth: true } },
{ path: '/login', component: Login },
],
});
router.beforeEach((to, from, next) => {
const token = localStorage.getItem('token');
if (to.meta.requiresAuth && !token) {
next('/login');
} else {
next();
}
});
export default router;全局注入 axios
在 main.js 中将 axios 实例挂载到 Vue 原型上，方便全局调用。
import Vue from 'vue';
import App from './App.vue';
import http from './utils/http';
import router from './router';
Vue.prototype.$http = http;
new Vue({
router,
render: (h) => h(App),
}).$mount('#app');
