vue 实现登陆

Vue 实现登录功能

前端部分

在 Vue 中实现登录功能通常需要结合 Vue Router 和状态管理工具（如 Vuex 或 Pinia）。

1. 创建登录表单组件

   
   <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>

export default { data() { return { username: '', password: '' } }, methods: { async handleLogin() { try { const response = await this.$http.post('/api/login', { username: this.username, password: this.password }) localStorage.setItem('token', response.data.token) this.$router.push('/dashboard') } catch (error) { alert('登录失败') } } } } ```

1. 配置路由

   
   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 管理用户状态。

1. 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）

以上实现可根据具体项目需求进行调整，核心思路是通过表单收集凭证，发送到后端验证，存储返回的认证令牌，并在前端路由中实施保护。