vue实现登录退出
实现登录功能
在Vue中实现登录功能通常需要结合表单验证、API请求和状态管理。以下是一个基础实现示例：
安装必要依赖（如axios和vuex）：
npm install axios vuex创建登录表单组件：
<template>
<form @submit.prevent="handleLogin">
<input v-model="username" type="text" placeholder="用户名" required>
<input v-model="password" type="password" placeholder="密码" required>
<button type="submit">登录</button>
</form>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
async handleLogin() {
try {
const response = await axios.post('/api/login', {
username: this.username,
password: this.password
});
this.$store.commit('setUser', response.data.user);
this.$store.commit('setToken', response.data.token);
localStorage.setItem('token', response.data.token);
this.$router.push('/dashboard');
} catch (error) {
alert('登录失败: ' + error.response.data.message);
}
}
}
}
</script>配置Vuex状态管理
创建store.js管理用户状态：
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
user: null,
token: null
},
mutations: {
setUser(state, user) {
state.user = user;
},
setToken(state, token) {
state.token = token;
},
clearAuth(state) {
state.user = null;
state.token = null;
}
}
});实现退出功能
创建退出按钮组件：
<template>
<button @click="handleLogout">退出登录</button>
</template>
<script>
export default {
methods: {
handleLogout() {
this.$store.commit('clearAuth');
localStorage.removeItem('token');
this.$router.push('/login');
}
}
}
</script>路由守卫配置
在router/index.js中添加导航守卫：
import Vue from 'vue';
import Router from 'vue-router';
import store from '../store';
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)) {
if (!store.state.token) {
next('/login');
} else {
next();
}
} else {
next();
}
});持久化token处理
在main.js中添加初始化逻辑：
import store from './store';
const token = localStorage.getItem('token');
if (token) {
store.commit('setToken', token);
// 可以添加自动获取用户信息的逻辑
}补充说明
- 表单验证可以使用VeeValidate等库增强
- 考虑添加CSRF保护机制
- 对于生产环境应使用HTTPS和安全的cookie设置
- token应设置合理的过期时间
- 敏感操作应要求重新验证密码
以上实现可根据具体需求进行调整，如添加双因素认证、验证码等功能。
