当前位置：首页 > VUE

网页登录实现vue

2026-02-17 13:20:01VUE

实现 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 实现网页登录的主要方面，包括表单处理、验证、状态管理、路由保护和持久化登录。根据具体项目需求，可以进一步扩展或调整这些实现。

网页登录实现vue