vue实现动态登录
Vue 实现动态登录方案
基础登录表单实现
使用 Vue 的 v-model 实现表单数据双向绑定，创建包含用户名和密码输入框的登录组件。示例代码：
<template>
<form @submit.prevent="handleLogin">
<input v-model="form.username" 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 res = await axios.post('/api/login', this.form)
localStorage.setItem('token', res.data.token)
this.$router.push('/dashboard')
} catch (error) {
alert('登录失败')
}
}
}
}
</script>动态验证码集成
通过后端接口获取动态验证码图片，并添加刷新功能。在 data 中添加验证码相关字段：
data() {
return {
captcha: '',
captchaImage: '',
form: {
// ...原有字段
captcha: ''
}
}
}路由守卫配置
在路由配置中添加全局前置守卫，实现未登录跳转：
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token')
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login')
} else {
next()
}
})状态管理集成
使用 Vuex 集中管理登录状态，创建 auth 模块：
const auth = {
state: {
token: localStorage.getItem('token') || '',
user: null
},
mutations: {
SET_TOKEN(state, token) {
state.token = token
localStorage.setItem('token', token)
},
CLEAR_AUTH(state) {
state.token = ''
localStorage.removeItem('token')
}
},
actions: {
login({ commit }, credentials) {
return axios.post('/api/login', credentials)
.then(res => {
commit('SET_TOKEN', res.data.token)
return res
})
}
}
}响应式权限控制
结合动态路由实现权限控制，在登录成功后根据用户角色加载对应路由：
async function loadRoutes(role) {
const routes = await import(`@/router/${role}Routes.js`)
router.addRoutes(routes.default)
}安全增强措施
实现以下安全功能：
- 登录请求防抖处理
- 密码输入错误次数限制
- 敏感操作二次验证
- JWT 自动刷新机制
