vue实现登录退出
Vue 实现登录和退出功能
登录功能实现
创建登录表单组件 在 Vue 项目中创建一个登录组件，包含用户名和密码输入框以及登录按钮。表单提交时触发登录方法。
<template>
<form @submit.prevent="handleLogin">
<input v-model="username" type="text" placeholder="用户名" />
<input v-model="password" type="password" placeholder="密码" />
<button type="submit">登录</button>
</form>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
async handleLogin() {
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.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token')
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login')
} else {
next()
}
})退出功能实现
创建退出方法 在需要退出功能的组件中添加退出方法，清除本地存储的 token 并重定向到登录页面。
methods: {
handleLogout() {
localStorage.removeItem('token')
this.$router.push('/login')
}
}添加退出按钮 在导航栏或其他适当位置添加退出按钮，绑定退出方法。
<button @click="handleLogout">退出登录</button>状态管理（可选）
对于更复杂的应用，可以使用 Vuex 管理登录状态。
Vuex 配置
const store = new Vuex.Store({
state: {
isAuthenticated: false,
user: null
},
mutations: {
login(state, user) {
state.isAuthenticated = true
state.user = user
},
logout(state) {
state.isAuthenticated = false
state.user = null
}
}
})更新登录方法
methods: {
async handleLogin() {
try {
const response = await axios.post('/api/login', {
username: this.username,
password: this.password
})
this.$store.commit('login', response.data.user)
localStorage.setItem('token', response.data.token)
this.$router.push('/dashboard')
} catch (error) {
console.error('登录失败', error)
}
}
}更新退出方法
methods: {
handleLogout() {
this.$store.commit('logout')
localStorage.removeItem('token')
this.$router.push('/login')
}
}以上方法提供了 Vue 中实现登录和退出功能的基本方案，可以根据实际需求进行调整和扩展。
