vue登录逻辑实现
Vue 登录逻辑实现
前端实现步骤
创建登录组件
在 Vue 项目中创建一个登录组件，通常命名为 Login.vue。该组件包含表单元素，如用户名和密码输入框，以及提交按钮。
<template>
<div class="login-container">
<form @submit.prevent="handleLogin">
<input v-model="username" type="text" placeholder="用户名" />
<input v-model="password" type="password" placeholder="密码" />
<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>配置路由 在路由配置文件中，将登录组件添加到路由中，并设置路由守卫以确保未登录用户无法访问受保护的路由。
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) => {
const token = localStorage.getItem('token');
if (to.meta.requiresAuth && !token) {
next('/login');
} else {
next();
}
});
export default router;后端实现步骤
创建登录接口 在后端服务器中，创建一个处理登录请求的接口。该接口验证用户凭据并返回令牌。
const express = require('express');
const jwt = require('jsonwebtoken');
const app = express();
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');
});验证令牌 在后端路由中，添加中间件以验证请求中的令牌。
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();
});
}
app.get('/api/protected', authenticateToken, (req, res) => {
res.json({ message: '受保护的内容' });
});安全性注意事项
使用 HTTPS 确保所有通信通过 HTTPS 进行，以防止中间人攻击。
令牌存储 避免将敏感信息存储在令牌中，使用短期有效的令牌并定期刷新。
输入验证 在前端和后端均对用户输入进行验证，防止 SQL 注入和 XSS 攻击。
跨域问题 如果前端和后端不在同一域名下，配置 CORS 以允许跨域请求。
const cors = require('cors');
app.use(cors());通过以上步骤，可以实现一个基本的 Vue 登录逻辑。根据实际需求，可以进一步扩展功能，如添加验证码、多因素认证等。
