当前位置：首页 > VUE

vue登录逻辑实现

2026-03-08 18:24:41VUE

Vue 登录逻辑实现

前端实现

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

<template>
  <form @submit.prevent="handleLogin">
    <input v-model="username" type="text" placeholder="Username" />
    <input v-model="password" type="password" placeholder="Password" />
    <button type="submit">Login</button>
  </form>
</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('Login failed:', error)
      }
    }
  }
}
</script>

后端验证

后端接收前端发送的用户名和密码，验证用户信息是否匹配数据库记录。验证通过后生成 JWT 令牌返回给前端。

// Node.js Express 示例
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({ error: 'Invalid credentials' })
  }

  const token = jwt.sign({ userId: user._id }, 'secret_key', { expiresIn: '1h' })
  res.json({ token })
})

路由守卫

在 Vue Router 中配置全局前置守卫，检查用户是否已登录（存在有效令牌），未登录则重定向到登录页面。

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

令牌验证

对于需要身份验证的 API 请求，前端需要在请求头中添加 Authorization 字段携带令牌，后端验证令牌有效性。

// 前端请求拦截器
axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

错误处理

实现统一的错误处理机制，包括网络错误、验证错误和令牌过期等情况，提供友好的用户反馈。

vue登录逻辑实现

// 响应拦截器
axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      localStorage.removeItem('token')
      router.push('/login')
    }
    return Promise.reject(error)
  }
)