vue实现登录源码
以下是一个基于 Vue.js 的登录功能实现示例，包含前端代码和关键逻辑说明：
登录页面组件
<template>
<div class="login-container">
<form @submit.prevent="handleSubmit">
<div class="form-group">
<label>用户名</label>
<input v-model="form.username" type="text" required />
</div>
<div class="form-group">
<label>密码</label>
<input v-model="form.password" type="password" required />
</div>
<button type="submit">登录</button>
</form>
</div>
</template>
<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import axios from 'axios'
export default {
setup() {
const form = ref({
username: '',
password: ''
})
const router = useRouter()
const store = useStore()
const handleSubmit = async () => {
try {
const response = await axios.post('/api/login', form.value)
store.commit('setUser', response.data.user)
localStorage.setItem('token', response.data.token)
router.push('/dashboard')
} catch (error) {
alert('登录失败: ' + error.response.data.message)
}
}
return { form, handleSubmit }
}
}
</script>
<style scoped>
.login-container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
}
.form-group {
margin-bottom: 15px;
}
</style>Vuex 状态管理
// store/index.js
import { createStore } from 'vuex'
export default createStore({
state: {
user: null,
token: null
},
mutations: {
setUser(state, user) {
state.user = user
},
setToken(state, token) {
state.token = token
},
logout(state) {
state.user = null
state.token = null
}
}
})路由配置
// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Login from '../views/Login.vue'
import Dashboard from '../views/Dashboard.vue'
const routes = [
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/dashboard',
name: 'Dashboard',
component: Dashboard,
meta: { requiresAuth: true }
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
router.beforeEach((to, from, next) => {
const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
const isAuthenticated = localStorage.getItem('token')
if (requiresAuth && !isAuthenticated) {
next('/login')
} else {
next()
}
})
export default router请求拦截器
// axios 配置
axios.interceptors.request.use(config => {
const token = localStorage.getItem('token')
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
return config
}, error => {
return Promise.reject(error)
})关键实现说明
表单数据使用 Vue 的 ref 进行响应式管理，通过 v-model 实现双向绑定。
登录请求使用 Axios 发送 POST 请求到后端接口，成功后将用户信息和 token 存储到 Vuex 和 localStorage。
路由守卫检查需要认证的路由，未登录用户访问受保护路由时自动跳转到登录页。
Axios 拦截器自动为每个请求添加 Authorization 头部，携带 JWT token。
登录成功后使用 Vue Router 跳转到仪表盘页面，失败时显示错误信息。
