vue实现后台登录
Vue 实现后台登录功能
创建登录页面组件
在 src/views 目录下创建 Login.vue 文件，包含表单元素和基础样式。表单通常包含用户名、密码输入框和登录按钮。
<template>
<div class="login-container">
<form @submit.prevent="handleLogin">
<input v-model="form.username" placeholder="用户名" />
<input v-model="form.password" type="password" placeholder="密码" />
<button type="submit">登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
form: {
username: '',
password: ''
}
}
},
methods: {
handleLogin() {
// 登录逻辑
}
}
}
</script>配置路由
在 src/router/index.js 中配置登录页面的路由，确保未登录用户只能访问登录页面。
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/Login.vue'
Vue.use(Router)
const router = new Router({
routes: [
{
path: '/login',
name: 'Login',
component: Login
}
]
})实现登录认证逻辑
在 handleLogin 方法中调用 API 接口验证用户凭证，成功后存储 token 并跳转到后台首页。
methods: {
async handleLogin() {
try {
const response = await axios.post('/api/login', this.form)
localStorage.setItem('token', response.data.token)
this.$router.push('/dashboard')
} catch (error) {
alert('登录失败')
}
}
}添加路由守卫
在路由配置中添加全局前置守卫，检查用户是否已认证。
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token')
if (to.path !== '/login' && !isAuthenticated) {
next('/login')
} else {
next()
}
})集成状态管理（可选）
对于复杂应用，可使用 Vuex 管理登录状态和用户信息。
// store/modules/auth.js
export default {
state: {
token: localStorage.getItem('token') || '',
user: null
},
mutations: {
setToken(state, token) {
state.token = token
localStorage.setItem('token', token)
}
}
}添加表单验证
使用 Vuelidate 或自定义验证规则确保输入有效性。
import { required } from 'vuelidate/lib/validators'
export default {
validations: {
form: {
username: { required },
password: { required }
}
}
}实现登出功能
清除本地存储的 token 并重定向到登录页。
methods: {
logout() {
localStorage.removeItem('token')
this.$router.push('/login')
}
}
