当前位置：首页 > VUE

vue怎么实现登录功能

2026-01-20 15:33:03VUE

前端实现登录功能

使用 Vue.js 结合 Vue Router 和 Axios 实现登录功能，需要创建登录页面、处理表单提交、与后端 API 交互并管理用户状态。

创建登录组件

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

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    async handleLogin() {
      try {
        const response = await this.$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>

配置路由守卫 在 router/index.js 中添加全局前置守卫，保护需要认证的路由：

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

后端API接口

后端需要提供验证用户凭据并返回令牌的接口，以下是 Node.js Express 示例：

用户验证和令牌生成

const jwt = require('jsonwebtoken')

app.post('/api/login', async (req, res) => {
  const { username, password } = req.body
  const user = await User.findOne({ username })

  if (!user || !bcrypt.compareSync(password, user.password)) {
    return res.status(401).json({ message: '无效的用户名或密码' })
  }

  const token = jwt.sign(
    { userId: user._id },
    process.env.JWT_SECRET,
    { expiresIn: '1h' }
  )

  res.json({ token })
})

状态管理

对于复杂应用，建议使用 Vuex 集中管理用户认证状态：

Vuex Store 配置

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

安全注意事项

实现登录功能时需考虑以下安全措施：

使用 HTTPS 加密通信
密码存储使用 bcrypt 等安全哈希算法
JWT 令牌设置合理有效期
实现 CSRF 防护
前端输入验证和清理
后端速率限制防止暴力破解

错误处理

完善的前后端错误处理机制能提升用户体验：

前端错误处理增强

methods: {
  async handleLogin() {
    this.error = null
    try {
      const response = await this.$axios.post('/api/login', {
        username: this.username,
        password: this.password
      })
      // ...成功处理
    } catch (error) {
      if (error.response) {
        this.error = error.response.data.message || '登录失败'
      } else {
        this.error = '网络错误，请稍后重试'
      }
    }
  }
}

后端错误响应标准化

vue怎么实现登录功能

app.post('/api/login', async (req, res) => {
  try {
    // ...验证逻辑
  } catch (error) {
    res.status(500).json({ 
      message: '服务器错误',
      error: process.env.NODE_ENV === 'development' ? error.message : null
    })
  }
})