当前位置：首页 > VUE

vue如何实现登录

2026-03-28 04:31:19VUE

Vue 实现登录功能的方法

前端部分（Vue实现）

创建登录表单组件
使用v-model双向绑定获取用户输入的账号和密码数据，表单提交时触发登录方法。

vue如何实现登录

<template>
  <form @submit.prevent="handleLogin">
    <input v-model="username" placeholder="用户名" />
    <input v-model="password" type="password" placeholder="密码" />
    <button type="submit">登录</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) {
        alert('登录失败')
      }
    }
  }
}
</script>

后端接口部分

创建登录API接口
后端需要验证用户凭证并返回认证令牌。

vue如何实现登录

// Node.js示例
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 }, 'secret_key', { expiresIn: '1h' })
  res.json({ token })
})

路由守卫配置

添加全局前置守卫保护需要认证的路由。

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

状态管理（可选）

使用Vuex管理用户认证状态。

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