vue实现登录系统
实现登录系统的基本步骤
安装Vue.js及相关依赖
使用Vue CLI创建项目，安装vue-router和axios。vue-router用于页面路由管理，axios用于HTTP请求。
npm install vue-router axios创建登录组件
在components文件夹下创建Login.vue文件，包含表单和提交逻辑。
<template>
<div>
<form @submit.prevent="handleSubmit">
<input v-model="username" type="text" placeholder="用户名" required>
<input v-model="password" type="password" placeholder="密码" required>
<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>配置路由
在router/index.js中设置登录路由和受保护的路由。
import Vue from 'vue'
import Router from 'vue-router'
import Login from '../components/Login.vue'
import Dashboard from '../components/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) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
const token = localStorage.getItem('token');
if (!token) {
next('/login');
} else {
next();
}
} else {
next();
}
})
export default router处理认证状态
在main.js中配置axios全局拦截器，确保每次请求都携带token。
import axios from '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);
});后端接口对接
确保后端API接收用户名和密码，验证成功后返回token。
// 示例Node.js Express路由
app.post('/api/login', (req, res) => {
const { username, password } = req.body;
// 验证逻辑
if (username === 'admin' && password === '123456') {
res.json({ token: 'generated-jwt-token' });
} else {
res.status(401).json({ error: '认证失败' });
}
});添加注销功能
在需要注销的地方清除本地存储的token并重定向到登录页。
methods: {
logout() {
localStorage.removeItem('token');
this.$router.push('/login');
}
}表单验证增强
使用Vuelidate等库增加表单验证功能。
npm install vuelidate在组件中引入并使用验证规则。
<script>
import { required, minLength } from 'vuelidate/lib/validators'
export default {
data() {
return {
username: '',
password: ''
}
},
validations: {
username: { required },
password: { required, minLength: minLength(6) }
},
methods: {
handleSubmit() {
this.$v.$touch();
if (!this.$v.$invalid) {
// 提交逻辑
}
}
}
}
</script>响应式处理
根据登录状态显示不同内容，使用Vuex管理全局状态。
npm install vuex创建store管理用户认证状态。
// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
isAuthenticated: false
},
mutations: {
setAuth(state, status) {
state.isAuthenticated = status
}
}
})在登录成功后更新状态。
methods: {
async handleSubmit() {
// ...登录逻辑
this.$store.commit('setAuth', true);
}
}
