vue实现登录检验

实现登录验证的方法

在Vue中实现登录验证通常涉及前端表单验证、与后端API交互以及状态管理。以下是常见的实现步骤：

创建登录表单组件

使用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 this.$http.post('/api/login', {
          username: this.username,
          password: this.password
        })
        // 处理登录成功逻辑
      } catch (error) {
        // 处理错误
      }
    }
  }
}
</script>

前端表单验证

在提交前进行基本验证：

methods: {
  validateForm() {
    if (!this.username.trim()) {
      alert('请输入用户名')
      return false
    }
    if (!this.password) {
      alert('请输入密码')
      return false
    }
    return true
  },
  async handleSubmit() {
    if (!this.validateForm()) return

    // 其余登录逻辑
  }
}

与后端API交互

使用axios或其他HTTP客户端发送登录请求：

import axios from 'axios'

methods: {
  async handleSubmit() {
    try {
      const response = await axios.post('http://your-api.com/login', {
        username: this.username,
        password: this.password
      })

      // 存储token
      localStorage.setItem('token', response.data.token)

      // 跳转到主页
      this.$router.push('/')
    } catch (error) {
      console.error('登录失败:', error)
    }
  }
}

路由守卫验证

在Vue Router中设置全局前置守卫，保护需要认证的路由：

// router/index.js
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    const token = localStorage.getItem('token')
    if (!token) {
      next('/login')
    } else {
      next()
    }
  } else {
    next()
  }
})

状态管理

使用Vuex管理用户登录状态：

// store/index.js
const store = new Vuex.Store({
  state: {
    user: null,
    isAuthenticated: false
  },
  mutations: {
    setUser(state, user) {
      state.user = user
      state.isAuthenticated = true
    },
    logout(state) {
      state.user = null
      state.isAuthenticated = false
    }
  },
  actions: {
    login({ commit }, credentials) {
      return axios.post('/api/login', credentials)
        .then(response => {
          commit('setUser', response.data.user)
          localStorage.setItem('token', response.data.token)
        })
    },
    logout({ commit }) {
      commit('logout')
      localStorage.removeItem('token')
    }
  }
})

响应拦截器

设置axios响应拦截器处理401未授权错误：

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      store.dispatch('logout')
      router.push('/login')
    }
    return Promise.reject(error)
  }
)

持久化登录状态

在应用初始化时检查本地存储的token：

// main.js
const token = localStorage.getItem('token')
if (token) {
  axios.defaults.headers.common['Authorization'] = `Bearer ${token}`
  store.dispatch('fetchUser')
}

这些方法组合起来可以构建一个完整的Vue登录验证系统，包括前端验证、API交互、状态管理和路由保护。根据具体需求，可以调整或扩展这些实现方式。