vue实现制动登录功能
Vue 实现登录功能
安装必要依赖
确保项目已安装 Vue Router 和 Axios：
npm install vue-router axios创建登录组件
在 src/components 下创建 Login.vue 文件：
<template>
<div>
<form @submit.prevent="handleSubmit">
<input v-model="username" placeholder="用户名" />
<input v-model="password" type="password" placeholder="密码" />
<button type="submit">登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
async handleSubmit() {
try {
const response = await axios.post('/api/login', {
username: this.username,
password: this.password
})
localStorage.setItem('token', response.data.token)
this.$router.push('/dashboard')
} catch (error) {
console.error('登录失败', error)
}
}
}
}
</script>配置路由
在 src/router/index.js 中设置路由：
import { createRouter, createWebHistory } from 'vue-router'
import Login from '../components/Login.vue'
import Dashboard from '../components/Dashboard.vue'
const routes = [
{ path: '/login', component: Login },
{ path: '/dashboard', component: Dashboard, meta: { requiresAuth: true } }
]
const router = createRouter({
history: createWebHistory(),
routes
})
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !localStorage.getItem('token')) {
next('/login')
} else {
next()
}
})
export default router封装 API 请求
在 src/api/auth.js 中封装登录接口：
import axios from 'axios'
export const login = (credentials) => {
return axios.post('/api/login', credentials)
}状态管理（可选）
如需使用 Vuex 管理登录状态：
// src/store/index.js
import { createStore } from 'vuex'
export default createStore({
state: {
user: null,
token: localStorage.getItem('token') || null
},
mutations: {
setUser(state, user) {
state.user = user
},
setToken(state, token) {
state.token = token
localStorage.setItem('token', token)
},
logout(state) {
state.user = null
state.token = null
localStorage.removeItem('token')
}
}
})响应拦截处理
在 src/main.js 中添加全局响应拦截：
axios.interceptors.response.use(
response => response,
error => {
if (error.response.status === 401) {
store.commit('logout')
router.push('/login')
}
return Promise.reject(error)
}
)样式优化
添加基础样式增强用户体验：
/* 在组件中或全局样式文件 */
form {
max-width: 300px;
margin: 0 auto;
}
input {
display: block;
width: 100%;
margin: 10px 0;
padding: 8px;
}
button {
width: 100%;
padding: 10px;
background: #42b983;
color: white;
border: none;
}以上实现包含前端登录的核心流程，可根据实际需求扩展验证逻辑、加载状态提示或第三方登录集成。后端接口需自行实现并确保返回有效的 JWT 或 session token。
