vue实现登录系统axios
Vue 中使用 Axios 实现登录系统
安装 Axios
在项目中安装 Axios 依赖：
npm install axios创建 Axios 实例
在 src 目录下新建 utils/http.js 文件，配置 Axios 基础设置和拦截器：
import axios from 'axios'
const http = axios.create({
baseURL: 'https://your-api-url.com',
timeout: 5000
})
// 请求拦截器
http.interceptors.request.use(config => {
const token = localStorage.getItem('token')
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
return config
})
// 响应拦截器
http.interceptors.response.use(
response => response.data,
error => {
if (error.response.status === 401) {
// 处理未授权情况
}
return Promise.reject(error)
}
)
export default http登录组件实现
创建登录表单组件 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 http from '@/utils/http'
export default {
data() {
return {
form: {
username: '',
password: ''
}
}
},
methods: {
async handleLogin() {
try {
const res = await http.post('/login', this.form)
localStorage.setItem('token', res.token)
this.$router.push('/dashboard')
} catch (error) {
alert('登录失败')
}
}
}
}
</script>路由配置
在 router/index.js 中配置路由守卫：
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/Login'
import Dashboard from '@/views/Dashboard'
Vue.use(Router)
const router = new Router({
routes: [
{ path: '/login', component: Login },
{ path: '/dashboard', component: Dashboard, meta: { requiresAuth: true } }
]
})
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
const token = localStorage.getItem('token')
if (!token) {
next('/login')
} else {
next()
}
} else {
next()
}
})
export default router登出功能实现
在需要登出的组件中添加方法：
methods: {
logout() {
localStorage.removeItem('token')
this.$router.push('/login')
}
}错误处理优化
在 http.js 中完善错误处理逻辑：
http.interceptors.response.use(
response => response.data,
error => {
if (error.response) {
switch (error.response.status) {
case 401:
router.push('/login')
break
case 403:
alert('无权限访问')
break
case 500:
alert('服务器错误')
break
default:
alert('未知错误')
}
}
return Promise.reject(error)
}
)环境变量配置
在项目根目录创建 .env 文件：
VUE_APP_API_URL=https://your-api-url.com修改 http.js 中的 baseURL：
baseURL: process.env.VUE_APP_API_URL以上实现包含了 Vue 项目中通过 Axios 实现登录系统的主要环节，可根据实际需求进行调整和扩展。
