vue实现前端登录
Vue 前端登录实现方案
基础登录表单实现
创建登录表单组件，包含用户名和密码输入框。使用v-model双向绑定数据，通过@submit监听表单提交事件。
<template>
<form @submit.prevent="handleLogin">
<input v-model="form.username" type="text" placeholder="用户名">
<input v-model="form.password" type="password" placeholder="密码">
<button type="submit">登录</button>
</form>
</template>
<script>
export default {
data() {
return {
form: {
username: '',
password: ''
}
}
},
methods: {
async handleLogin() {
try {
const response = await axios.post('/api/login', this.form)
// 处理登录成功逻辑
} catch (error) {
// 处理错误
}
}
}
}
</script>状态管理与Token存储
使用Vuex管理登录状态，登录成功后存储token至localStorage和Vuex。
// store/auth.js
const state = {
token: localStorage.getItem('token') || '',
user: null
}
const mutations = {
SET_TOKEN(state, token) {
state.token = token
localStorage.setItem('token', token)
},
SET_USER(state, user) {
state.user = user
}
}
const actions = {
async login({ commit }, credentials) {
const response = await axios.post('/api/login', credentials)
commit('SET_TOKEN', response.data.token)
commit('SET_USER', response.data.user)
}
}路由守卫配置
配置全局路由守卫，保护需要认证的路由。
// router/index.js
router.beforeEach((to, from, next) => {
const isAuthenticated = store.state.auth.token
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login')
} else {
next()
}
})Axios请求拦截
设置axios请求拦截器，自动为请求添加认证头。
// utils/axios.js
axios.interceptors.request.use(config => {
const token = store.state.auth.token
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
return config
}, error => {
return Promise.reject(error)
})响应拦截与错误处理
配置响应拦截器处理401未授权错误。
axios.interceptors.response.use(response => {
return response
}, error => {
if (error.response.status === 401) {
store.commit('auth/LOGOUT')
router.push('/login')
}
return Promise.reject(error)
})登录状态持久化
实现刷新页面后自动恢复登录状态。
// App.vue
export default {
created() {
const token = localStorage.getItem('token')
if (token) {
this.$store.dispatch('auth/fetchUser')
}
}
}第三方登录集成
支持OAuth2.0第三方登录（如Google、GitHub）。
methods: {
initiateOAuth(provider) {
window.location.href = `/api/auth/${provider}`
}
}表单验证增强
使用Vuelidate或vee-validate进行表单验证。
import { required, minLength } from 'vuelidate/lib/validators'
export default {
validations: {
form: {
username: { required },
password: { required, minLength: minLength(6) }
}
}
}安全增强措施
实现CSRF防护和XSS防护。
// main.js
axios.defaults.xsrfCookieName = 'csrftoken'
axios.defaults.xsrfHeaderName = 'X-CSRFToken'性能优化
实现懒加载登录相关组件。
const Login = () => import('./views/Login.vue')
