vue如何实现登录验证
Vue 实现登录验证的方法
前端表单验证
在 Vue 中可以使用 v-model 绑定表单数据，结合计算属性或 watch 进行实时验证。例如：
data() {
return {
username: '',
password: '',
errors: {
username: '',
password: ''
}
}
},
methods: {
validateForm() {
let isValid = true
if (!this.username) {
this.errors.username = '请输入用户名'
isValid = false
}
if (!this.password) {
this.errors.password = '请输入密码'
isValid = false
}
return isValid
}
}发送登录请求
通过 Axios 或其他 HTTP 客户端向后端发送认证请求：
async login() {
if (!this.validateForm()) return
try {
const response = await axios.post('/api/login', {
username: this.username,
password: this.password
})
localStorage.setItem('token', response.data.token)
this.$router.push('/dashboard')
} catch (error) {
console.error('登录失败:', error)
}
}路由守卫验证
使用 Vue Router 的导航守卫保护需要认证的路由：
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token')
if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
next('/login')
} else {
next()
}
})状态管理
对于复杂应用，建议使用 Vuex 管理认证状态：
const store = new Vuex.Store({
state: {
isAuthenticated: false,
user: null
},
mutations: {
setAuth(state, payload) {
state.isAuthenticated = payload.isAuthenticated
state.user = payload.user
}
},
actions: {
login({ commit }, credentials) {
return axios.post('/api/login', credentials)
.then(response => {
commit('setAuth', {
isAuthenticated: true,
user: response.data.user
})
})
}
}
})JWT 验证
如果使用 JWT，需要在每次请求时携带 token：
axios.interceptors.request.use(config => {
const token = localStorage.getItem('token')
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
return config
}, error => {
return Promise.reject(error)
})错误处理
实现统一的错误处理逻辑：
axios.interceptors.response.use(response => {
return response
}, error => {
if (error.response.status === 401) {
localStorage.removeItem('token')
router.push('/login')
}
return Promise.reject(error)
})以上方法可以组合使用，根据项目需求选择适合的方案。前端验证虽然必要，但最终认证应由后端完成，前端仅负责展示和交互逻辑。
