vue实现本地登陆
Vue 实现本地登录功能
准备工作
确保已安装 Vue.js 和 Vue Router。若未安装，可通过以下命令安装：
npm install vue vue-router创建登录页面组件
在 src/views/Login.vue 中创建登录表单：
<template>
<div class="login">
<h1>登录</h1>
<form @submit.prevent="handleLogin">
<input v-model="username" placeholder="用户名" required />
<input v-model="password" type="password" placeholder="密码" required />
<button type="submit">登录</button>
</form>
<p v-if="error" class="error">{{ error }}</p>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
error: ''
};
},
methods: {
handleLogin() {
if (this.username === 'admin' && this.password === '123456') {
localStorage.setItem('isAuthenticated', 'true');
this.$router.push('/dashboard');
} else {
this.error = '用户名或密码错误';
}
}
}
};
</script>配置路由
在 src/router/index.js 中设置路由守卫和登录路由：
import Vue from 'vue';
import Router from 'vue-router';
import Login from '@/views/Login.vue';
import Dashboard from '@/views/Dashboard.vue';
Vue.use(Router);
const router = new Router({
routes: [
{ path: '/login', component: Login },
{ path: '/dashboard', component: Dashboard, meta: { requiresAuth: true } }
]
});
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('isAuthenticated');
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login');
} else {
next();
}
});
export default router;创建受保护页面
在 src/views/Dashboard.vue 中创建需登录才能访问的页面：
<template>
<div>
<h1>欢迎进入仪表盘</h1>
<button @click="handleLogout">退出登录</button>
</div>
</template>
<script>
export default {
methods: {
handleLogout() {
localStorage.removeItem('isAuthenticated');
this.$router.push('/login');
}
}
};
</script>样式优化
添加基础样式到 src/App.vue 或单独样式文件：
.login {
max-width: 300px;
margin: 0 auto;
padding: 20px;
}
.error {
color: red;
}测试流程
- 访问
/login页面，输入正确的用户名 (admin) 和密码 (123456) 应跳转到仪表盘。 - 直接访问
/dashboard会重定向到登录页面。 - 点击退出按钮会清除登录状态并返回登录页。
扩展建议
- 使用 Vuex 集中管理登录状态
- 添加表单验证库如 VeeValidate
- 实现 JWT 或 OAuth 等更安全的认证方式
- 对密码进行加密存储
