vue登陆的实现

实现 Vue 登录功能

前端实现

1. 创建登录表单组件
   使用 Vue 的单文件组件（SFC）创建一个登录表单，包含用户名和密码输入框，以及提交按钮。

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

2. 路由配置
   使用 Vue Router 配置登录页和受保护的路由。

   import Vue from 'vue'
   import Router from 'vue-router'
   import Login from './views/Login.vue'
   import Dashboard from './views/Dashboard.vue'
   
   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

后端实现

1. 创建登录 API 端点
   使用 Node.js 和 Express 创建一个简单的登录 API。

   

   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 }, 'secret_key', { expiresIn: '1h' })
       res.json({ token })
     } else {
       res.status(401).json({ error: '用户名或密码错误' })
     }
   })
   
   app.listen(3000, () => console.log('服务器运行在 3000 端口'))

2. 验证 Token 中间件
   创建一个中间件来验证请求中的 JWT Token。

   function authenticateToken(req, res, next) {
     const token = req.headers['authorization']
     if (!token) return res.sendStatus(401)
   
     jwt.verify(token, 'secret_key', (err, user) => {
       if (err) return res.sendStatus(403)
       req.user = user
       next()
     })
   }

安全注意事项

1. 使用 HTTPS
   确保在生产环境中使用 HTTPS 来加密传输的数据。

   

2. 存储 Token
   避免将 Token 存储在容易受到 XSS 攻击的地方，如普通的 Cookie 或 localStorage。考虑使用 HttpOnly Cookie。

3. 密码哈希
   后端应对用户密码进行哈希处理，使用 bcrypt 等库。

   const bcrypt = require('bcrypt')
   const saltRounds = 10
   const hashedPassword = await bcrypt.hash(password, saltRounds)

4. 防止暴力破解
   实现登录尝试限制机制，防止暴力破解攻击。