vue登录如何实现
实现 Vue 登录功能
前端部分
在 Vue 项目中创建登录页面，通常使用 Vue Router 进行页面导航。登录表单包含用户名和密码输入框，以及提交按钮。
<template>
<div>
<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>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
async handleLogin() {
try {
const response = await this.$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>后端部分
后端需要提供登录接口，验证用户凭据并返回令牌。使用 Node.js 和 Express 框架示例：
const express = require('express')
const jwt = require('jsonwebtoken')
const app = express()
app.use(express.json())
app.post('/api/login', (req, res) => {
const { username, password } = req.body
// 实际项目中应从数据库验证用户
if (username === 'admin' && password === 'password') {
const token = jwt.sign({ username }, 'your-secret-key', { expiresIn: '1h' })
res.json({ token })
} else {
res.status(401).json({ error: '无效的用户名或密码' })
}
})
app.listen(3000, () => console.log('服务器运行在端口3000'))路由守卫
在 Vue 中实现路由守卫，保护需要认证的路由：
// router.js
import Vue from 'vue'
import Router from 'vue-router'
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.meta.requiresAuth && !localStorage.getItem('token')) {
next('/login')
} else {
next()
}
})
export default router状态管理
使用 Vuex 管理用户认证状态：
// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
user: null,
isAuthenticated: false
},
mutations: {
setUser(state, user) {
state.user = user
state.isAuthenticated = true
},
logout(state) {
state.user = null
state.isAuthenticated = false
}
},
actions: {
login({ commit }, userData) {
return axios.post('/api/login', userData)
.then(response => {
commit('setUser', response.data.user)
localStorage.setItem('token', response.data.token)
})
},
logout({ commit }) {
commit('logout')
localStorage.removeItem('token')
}
}
})请求拦截
在 axios 中设置请求拦截器，自动添加认证令牌：
// main.js
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)
})这些步骤组合起来可以构建一个完整的 Vue 登录系统，包括前端界面、后端验证、状态管理和路由保护。实际项目中还需要考虑密码加密、错误处理和用户体验优化等方面。
