前端vue登录功能实现

登录功能实现步骤

在Vue中实现登录功能通常需要结合后端API，以下是关键步骤和代码示例：

创建登录表单组件

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

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

处理登录请求

methods: {
  async handleSubmit() {
    try {
      const response = await axios.post('/api/login', this.form)
      localStorage.setItem('token', response.data.token)
      this.$router.push('/dashboard')
    } catch (error) {
      console.error('登录失败:', error)
    }
  }
}

路由配置与导航守卫

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/Login'
import Dashboard from '@/views/Dashboard'

Vue.use(Router)

const router = new Router({
  routes: [
    { path: '/login', component: Login },
    { path: '/dashboard', component: Dashboard, meta: { requiresAuth: true } }
  ]
})

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

状态管理（Vuex）

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    user: null,
    token: null
  },
  mutations: {
    setUser(state, { user, token }) {
      state.user = user
      state.token = token
    },
    clearUser(state) {
      state.user = null
      state.token = null
    }
  },
  actions: {
    login({ commit }, credentials) {
      return axios.post('/api/login', credentials)
        .then(({ data }) => {
          commit('setUser', data)
          localStorage.setItem('token', data.token)
        })
    },
    logout({ commit }) {
      commit('clearUser')
      localStorage.removeItem('token')
    }
  }
})

表单验证

可以使用Vuelidate等库进行表单验证：

import { required, minLength } from 'vuelidate/lib/validators'

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

错误处理与用户反馈

methods: {
  async handleSubmit() {
    try {
      const response = await this.$store.dispatch('login', this.form)
      this.$toast.success('登录成功')
      this.$router.push('/dashboard')
    } catch (error) {
      this.$toast.error(error.response?.data?.message || '登录失败')
    }
  }
}

记住登录状态

created() {
  const token = localStorage.getItem('token')
  if (token) {
    this.$store.dispatch('autoLogin', token)
  }
}

安全注意事项

• 使用HTTPS协议传输数据
• 密码应在前端加密处理
• 实现CSRF保护
• 设置合理的Token过期时间
• 敏感操作需要二次验证

以上实现可根据具体项目需求进行调整，建议结合具体业务场景和安全要求进行优化。