当前位置：首页 > VUE

vue登录实现方法

2026-02-19 01:32:36VUE

Vue 登录功能实现方法

前端实现（Vue.js）

创建登录表单组件
使用 Vue 的单文件组件创建登录表单，包含用户名和密码输入框以及提交按钮。通过 v-model 实现双向数据绑定。

<template>
  <div class="login-form">
    <input v-model="username" placeholder="用户名" />
    <input v-model="password" type="password" placeholder="密码" />
    <button @click="handleLogin">登录</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    async handleLogin() {
      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)
      }
    }
  }
}
</script>

后端API对接

使用 Axios 发送登录请求
安装 axios 并配置基础 URL 和请求拦截器。

import axios from 'axios'

axios.defaults.baseURL = 'http://your-api-domain.com'
axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

路由守卫配置

设置路由守卫保护需要认证的路由
在 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）

使用 Vuex 管理用户登录状态
创建 store 模块存储用户信息和登录状态。

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)
        })
    }
  }
})

安全注意事项

实现 JWT 过期处理
在响应拦截器中检查 token 是否过期，若过期则跳转至登录页。

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

表单验证

添加客户端表单验证
使用 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) {
        // 提交表单
      }
    }
  }
}

vue登录实现方法