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/index.js
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token')
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login')
} else {
next()
}
})退出功能实现
退出功能通常包括清除用户凭证和重定向：
创建退出方法
<template>
<button @click="handleLogout">退出登录</button>
</template>
<script>
export default {
methods: {
handleLogout() {
localStorage.removeItem('token')
this.$router.push('/login')
}
}
}
</script>状态管理
对于更复杂的应用，可以使用 Vuex 管理登录状态：
Vuex 状态管理示例
// store/index.js
export default new Vuex.Store({
state: {
user: null,
isAuthenticated: false
},
mutations: {
setUser(state, user) {
state.user = user
state.isAuthenticated = true
},
clearUser(state) {
state.user = null
state.isAuthenticated = false
}
},
actions: {
login({ commit }, credentials) {
return axios.post('/api/login', credentials)
.then(response => {
commit('setUser', response.data.user)
localStorage.setItem('token', response.data.token)
})
},
logout({ commit }) {
commit('clearUser')
localStorage.removeItem('token')
}
}
})安全注意事项
- 使用 HTTPS 协议传输敏感数据
- 考虑添加 CSRF 保护
- 实现适当的输入验证
- 使用 HttpOnly 和 Secure 标志的 Cookie
- 考虑实现刷新令牌机制
响应式处理
在导航栏中显示不同状态：
<template>
<div>
<span v-if="$store.state.isAuthenticated">
欢迎, {{ $store.state.user.name }}
<button @click="logout">退出</button>
</span>
<router-link v-else to="/login">登录</router-link>
</div>
</template>这些实现方法可以根据具体项目需求进行调整和扩展。对于生产环境，建议添加更多的错误处理和安全性措施。
