vue js实现登录
Vue.js 实现登录功能
环境准备
确保已安装 Vue.js 和必要的依赖（如 Vue Router、Axios）。通过以下命令初始化项目并安装依赖：
npm install vue-router axios登录页面组件
创建 Login.vue 文件，包含表单和基础校验逻辑：
<template>
<div>
<form @submit.prevent="handleLogin">
<input v-model="username" placeholder="用户名" required />
<input v-model="password" type="password" placeholder="密码" required />
<button type="submit">登录</button>
</form>
<p v-if="error">{{ error }}</p>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
error: ''
};
},
methods: {
async handleLogin() {
try {
const response = await axios.post('/api/login', {
username: this.username,
password: this.password
});
localStorage.setItem('token', response.data.token);
this.$router.push('/dashboard');
} catch (err) {
this.error = '登录失败，请检查凭证';
}
}
}
};
</script>路由配置
在 router/index.js 中设置登录路由和权限控制：
import { createRouter, createWebHistory } from 'vue-router';
import Login from '../views/Login.vue';
import Dashboard from '../views/Dashboard.vue';
const routes = [
{ path: '/login', component: Login },
{
path: '/dashboard',
component: Dashboard,
meta: { requiresAuth: true }
}
];
const router = createRouter({
history: createWebHistory(),
routes
});
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !localStorage.getItem('token')) {
next('/login');
} else {
next();
}
});
export default router;API 请求封装
使用 Axios 封装全局请求，并添加 token 拦截器：
// utils/api.js
import axios from 'axios';
const api = axios.create({
baseURL: 'http://your-api-url.com'
});
api.interceptors.request.use(config => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
});
export default api;状态管理（可选）
如需全局管理用户状态，可使用 Vuex：
// store/index.js
import { createStore } from 'vuex';
export default createStore({
state: {
user: null
},
mutations: {
setUser(state, user) {
state.user = user;
}
},
actions: {
async login({ commit }, credentials) {
const response = await api.post('/login', credentials);
commit('setUser', response.data.user);
}
}
});样式与优化
- 添加表单验证库（如 VeeValidate）增强校验。
- 使用 CSS 或框架（如 Tailwind）美化界面。
- 实现 token 刷新和过期处理逻辑。
