vue登录逻辑的实现
前端实现
在Vue项目中实现登录逻辑通常需要结合Vue Router和状态管理（如Vuex或Pinia）。以下是一个典型实现方式：
创建登录表单组件（Login.vue）：
<template>
<form @submit.prevent="handleSubmit">
<input v-model="username" type="text" placeholder="用户名">
<input v-model="password" type="password" placeholder="密码">
<button type="submit">登录</button>
</form>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
async handleSubmit() {
try {
const response = await axios.post('/api/login', {
username: this.username,
password: this.password
})
localStorage.setItem('token', response.data.token)
this.$store.commit('setUser', response.data.user)
this.$router.push('/dashboard')
} catch (error) {
console.error('登录失败:', error)
}
}
}
}
</script>路由配置
在router/index.js中配置路由守卫：
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 isAuthenticated = localStorage.getItem('token')
if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
next('/login')
} else {
next()
}
})
export default router状态管理
使用Vuex存储用户状态（store/index.js）：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
user: null
},
mutations: {
setUser(state, user) {
state.user = user
},
clearUser(state) {
state.user = null
}
}
})后端交互
Axios实例配置（src/api/index.js）：
import axios from 'axios'
const api = axios.create({
baseURL: process.env.VUE_APP_API_URL
})
api.interceptors.request.use(config => {
const token = localStorage.getItem('token')
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
return config
})
export default api安全注意事项
- 使用HTTPS协议传输登录凭证
- 考虑实现CSRF保护机制
- 密码字段应在前端进行基本验证（长度、复杂度）
- 敏感路由应设置适当的权限控制
- 考虑实现自动刷新token机制
扩展功能
实现记住我功能：
handleSubmit() {
// ...
if (this.rememberMe) {
localStorage.setItem('rememberedUser', this.username)
}
// ...
}添加验证码功能可增强安全性：
methods: {
async getCaptcha() {
this.captcha = await axios.get('/api/captcha')
},
handleSubmit() {
if (!this.validateCaptcha()) return
// ...
}
}
