vue实现登录功能怎么实现的

登录功能实现步骤

在Vue中实现登录功能通常涉及前端页面、表单验证、API请求和状态管理。以下是具体实现方法：

创建登录组件

新建一个Login.vue组件，包含表单元素和双向数据绑定：

<template>
  <form @submit.prevent="handleLogin">
    <input v-model="form.username" type="text" placeholder="用户名"/>
    <input v-model="form.password" type="password" placeholder="密码"/>
    <button type="submit">登录</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  }
}
</script>

添加表单验证

使用Vuelidate或手动验证：

<script>
import { required } from 'vuelidate/lib/validators'

export default {
  data() {
    return {
      form: { username: '', password: '' }
    }
  },
  validations: {
    form: {
      username: { required },
      password: { required }
    }
  },
  methods: {
    handleLogin() {
      this.$v.$touch()
      if (!this.$v.$invalid) {
        // 提交逻辑
      }
    }
  }
}
</script>

发送登录请求

使用axios调用后端API：

<script>
import axios from 'axios'

export default {
  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>

状态管理

使用Vuex存储登录状态：

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

路由守卫

配置路由拦截未登录访问：

// router.js
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !store.state.isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

响应拦截

在axios拦截器中处理token：

axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

持久化登录

在应用初始化时检查token：

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

通过以上步骤可以实现完整的Vue登录功能，包含表单处理、验证、API交互和状态管理。根据实际项目需求，可以在此基础上扩展如第三方登录、验证码等功能。