vue实现登录功能
创建登录页面组件
在 src/views 目录下新建 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>配置路由
在 src/router/index.js 中添加登录页路由：
import Login from '@/views/Login.vue';
const routes = [
{
path: '/login',
name: 'Login',
component: Login
}
];封装请求工具
在 src/utils/request.js 中配置 Axios 实例，添加请求拦截器（如 token 验证）：
import axios from 'axios';
const instance = axios.create({
baseURL: 'http://your-api-domain.com'
});
instance.interceptors.request.use(config => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
});
export default instance;状态管理（可选）
使用 Vuex 管理用户登录状态（src/store/modules/user.js）：
const state = {
token: localStorage.getItem('token') || '',
userInfo: null
};
const mutations = {
SET_TOKEN(state, token) {
state.token = token;
localStorage.setItem('token', token);
},
CLEAR_TOKEN(state) {
state.token = '';
localStorage.removeItem('token');
}
};
export default {
namespaced: true,
state,
mutations
};添加路由守卫
在 src/router/index.js 中配置全局前置守卫，限制未登录访问：
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token');
if (to.name !== 'Login' && !isAuthenticated) {
next({ name: 'Login' });
} else {
next();
}
});后端接口示例（Node.js）
提供简单的登录接口实现：
app.post('/api/login', (req, res) => {
const { username, password } = req.body;
if (username === 'admin' && password === '123456') {
res.json({ token: 'generated-jwt-token' });
} else {
res.status(401).json({ error: '认证失败' });
}
});样式优化
添加基础样式（Login.vue 的 <style> 部分）：
.login-container {
max-width: 300px;
margin: 0 auto;
padding: 20px;
}
input, button {
width: 100%;
margin: 10px 0;
padding: 8px;
}
