vue登录逻辑实现
Vue 登录逻辑实现
前端实现
表单设计与验证
创建登录表单组件，包含用户名和密码输入框。使用 Vue 的 v-model 进行双向数据绑定，结合 Vuelidate 或原生 HTML5 验证规则确保输入合法性。
<template>
<form @submit.prevent="handleLogin">
<input v-model="form.username" type="text" placeholder="用户名" required>
<input v-model="form.password" type="password" placeholder="密码" required>
<button type="submit">登录</button>
</form>
</template>状态管理 通过 Vuex 或 Pinia 管理用户登录状态，存储 token 和用户信息。定义 actions 处理异步登录请求。
// Pinia 示例
import { defineStore } from 'pinia';
export const useAuthStore = defineStore('auth', {
state: () => ({
user: null,
token: localStorage.getItem('token') || null
}),
actions: {
async login(credentials) {
const response = await axios.post('/api/login', credentials);
this.token = response.data.token;
this.user = response.data.user;
localStorage.setItem('token', this.token);
}
}
});路由守卫
配置全局前置守卫，检查路由元信息中的 requiresAuth 字段，未登录用户跳转至登录页。
// router.js
router.beforeEach((to, from, next) => {
const authStore = useAuthStore();
if (to.meta.requiresAuth && !authStore.token) {
next('/login');
} else {
next();
}
});后端交互
API 请求封装 使用 Axios 实例配置基础 URL 和请求拦截器，自动附加 token 到请求头。
// api.js
const api = axios.create({
baseURL: 'https://api.example.com'
});
api.interceptors.request.use(config => {
const token = localStorage.getItem('token');
if (token) config.headers.Authorization = `Bearer ${token}`;
return config;
});错误处理 捕获登录失败的异常，显示友好错误提示。处理 token 过期等场景。
try {
await authStore.login(this.form);
this.$router.push('/dashboard');
} catch (error) {
alert(error.response?.data?.message || '登录失败');
}安全增强
Token 刷新机制 实现无感刷新 token 的逻辑，当 access token 过期时自动使用 refresh token 获取新 token。
api.interceptors.response.use(
response => response,
async error => {
if (error.response.status === 401 && !originalRequest._retry) {
originalRequest._retry = true;
const newToken = await refreshToken();
localStorage.setItem('token', newToken);
return api(originalRequest);
}
return Promise.reject(error);
}
);敏感操作保护 关键操作需要二次验证，如修改密码时要求重新输入当前密码。
用户体验优化
加载状态 提交时显示加载动画，防止重复提交。
<button type="submit" :disabled="loading">
{{ loading ? '登录中...' : '登录' }}
</button>记住登录状态
通过 localStorage 持久化 token，或提供"记住我"选项延长会话有效期。
if (rememberMe) {
localStorage.setItem('rememberToken', newToken);
} else {
sessionStorage.setItem('sessionToken', newToken);
}第三方登录 集成 OAuth2.0 实现 Google、GitHub 等第三方登录，使用专用按钮和授权流程。
// 初始化 Google OAuth
window.gapi.load('auth2', () => {
window.gapi.auth2.init({
client_id: 'YOUR_CLIENT_ID'
});
});
