vue登录如何实现
Vue 登录实现步骤
安装依赖
确保项目已安装 axios 或 fetch 用于发送网络请求，以及 vue-router 用于页面跳转：
npm install axios vue-router创建登录表单组件
在 Login.vue 中编写表单，绑定数据模型：
<template>
<form @submit.prevent="handleLogin">
<input v-model="username" 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) {
alert('登录失败')
}
}
}
}
</script>配置路由
在 router/index.js 中设置登录路由：
import Login from '@/views/Login.vue'
const routes = [
{ path: '/login', component: Login },
{ path: '/dashboard', component: Dashboard, meta: { requiresAuth: true } }
]添加路由守卫
在路由配置中检查用户是否已认证：
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token')
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login')
} else {
next()
}
})后端接口对接
确保后端提供 /api/login 接口，接收 username 和 password，返回 token。示例响应格式：
{
"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
}状态管理（可选）
对于复杂应用，可使用 Vuex 集中管理登录状态：
// store/index.js
export default new Vuex.Store({
state: {
user: null,
token: null
},
mutations: {
setUser(state, payload) {
state.user = payload.user
state.token = payload.token
}
}
})在登录成功后调用：
this.$store.commit('setUser', {
user: response.data.user,
token: response.data.token
})
