vue 实现登陆
Vue 实现登录功能
前端部分
在 Vue 中实现登录功能通常需要结合 Vue Router 和状态管理工具（如 Vuex 或 Pinia）。
- 创建登录表单组件
<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>
- 配置路由
import { createRouter, createWebHistory } from 'vue-router' import Login from './views/Login.vue' import Dashboard from './views/Dashboard.vue'
const router = createRouter({ history: createWebHistory(), 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() } })
#### 后端部分
通常需要配合后端 API 实现认证。
1. JWT 认证示例（Node.js）
```javascript
const jwt = require('jsonwebtoken')
const express = require('express')
const app = express()
app.post('/api/login', (req, res) => {
const { username, password } = req.body
// 验证用户凭证（实际项目中应查询数据库）
if (username === 'admin' && password === '123456') {
const token = jwt.sign({ username }, 'your-secret-key', { expiresIn: '1h' })
res.json({ token })
} else {
res.status(401).json({ error: '认证失败' })
}
})状态管理
使用 Pinia 或 Vuex 管理用户状态。
- Pinia 示例
import { defineStore } from 'pinia'
export const useAuthStore = defineStore('auth', { state: () => ({ user: null, isAuthenticated: false }), actions: { login(token) { this.isAuthenticated = true localStorage.setItem('token', token) }, logout() { this.isAuthenticated = false this.user = null localStorage.removeItem('token') } } })
#### 安全注意事项
- 使用 HTTPS 协议传输数据
- 密码应加密存储（后端使用 bcrypt 等库）
- 设置合理的 JWT 过期时间
- 实现 CSRF 防护机制
- 前端输入验证（如限制密码长度和复杂度）
#### 扩展功能
- 记住我功能（使用 refresh token）
- 验证码防止暴力破解
- 多因素认证
- 社交账号登录集成（OAuth2）
以上实现可根据具体项目需求进行调整，核心思路是通过表单收集凭证，发送到后端验证，存储返回的认证令牌，并在前端路由中实施保护。
