网页登录实现vue
实现 Vue 网页登录功能
在 Vue 中实现网页登录功能通常需要结合前端表单验证、后端 API 交互和状态管理。以下是具体实现方法：
创建登录表单组件
使用 Vue 的单文件组件创建登录表单，包含用户名和密码输入框：
<template>
<form @submit.prevent="handleLogin">
<input v-model="username" type="text" placeholder="用户名" required>
<input v-model="password" type="password" placeholder="密码" required>
<button type="submit">登录</button>
</form>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
async handleLogin() {
try {
const response = await this.$http.post('/api/login', {
username: this.username,
password: this.password
})
// 处理登录成功逻辑
} catch (error) {
// 处理错误
}
}
}
}
</script>添加表单验证
可以使用 Vuelidate 或手动验证：
import { required, minLength } from 'vuelidate/lib/validators'
export default {
validations: {
username: { required },
password: { required, minLength: minLength(6) }
},
methods: {
handleLogin() {
this.$v.$touch()
if (this.$v.$invalid) return
// 提交表单
}
}
}处理登录状态
使用 Vuex 管理登录状态：
// store/modules/auth.js
const state = {
user: null,
token: null
}
const mutations = {
SET_USER(state, user) {
state.user = user
},
SET_TOKEN(state, token) {
state.token = token
}
}
const actions = {
login({ commit }, credentials) {
return axios.post('/api/login', credentials)
.then(response => {
commit('SET_USER', response.data.user)
commit('SET_TOKEN', response.data.token)
localStorage.setItem('token', response.data.token)
})
}
}路由守卫
配置路由守卫保护需要认证的路由：
// router/index.js
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!store.getters.isAuthenticated) {
next('/login')
} else {
next()
}
} else {
next()
}
})处理 HTTP 请求
配置 axios 拦截器自动添加认证 token：
// http.js
axios.interceptors.request.use(config => {
const token = localStorage.getItem('token')
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
return config
}, error => {
return Promise.reject(error)
})响应拦截
处理 401 未授权响应：
axios.interceptors.response.use(response => response, error => {
if (error.response.status === 401) {
store.dispatch('logout')
router.push('/login')
}
return Promise.reject(error)
})登录持久化
在应用初始化时恢复登录状态：
// main.js
const token = localStorage.getItem('token')
if (token) {
store.commit('SET_TOKEN', token)
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`
}以上步骤涵盖了 Vue 实现网页登录的主要方面，包括表单处理、验证、状态管理、路由保护和持久化登录。根据具体项目需求，可以进一步扩展或调整这些实现。
