当前位置：首页 > VUE

vue登陆的实现

2026-01-22 00:35:22VUE

Vue 登录实现

前端实现

创建登录表单组件，使用 v-model 绑定用户名和密码数据。

<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 实现

使用 Node.js Express 创建登录接口，验证用户凭据并返回 JWT 令牌。

const express = require('express')
const jwt = require('jsonwebtoken')
const app = express()

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

  // 验证用户凭据
  if (username === 'admin' && password === '123456') {
    const token = jwt.sign({ username }, 'secret_key', { expiresIn: '1h' })
    res.json({ token })
  } else {
    res.status(401).json({ error: '无效凭据' })
  }
})

app.listen(3000, () => console.log('服务器运行中'))

路由守卫

在 Vue 路由中配置全局前置守卫，保护需要认证的路由。

import router from './router'
import store from './store'

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

状态管理

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

const store = new Vuex.Store({
  state: {
    isAuthenticated: false,
    user: null
  },
  mutations: {
    setAuth(state, payload) {
      state.isAuthenticated = payload.isAuthenticated
      state.user = payload.user
    }
  },
  actions: {
    login({ commit }, credentials) {
      return axios.post('/api/login', credentials)
        .then(response => {
          commit('setAuth', {
            isAuthenticated: true,
            user: response.data.user
          })
        })
    }
  }
})

请求拦截

配置 axios 拦截器，自动在请求头中添加认证令牌。

axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
}, error => {
  return Promise.reject(error)
})

错误处理

处理认证失败情况，如令牌过期或无效。

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

表单验证

添加客户端表单验证，提高用户体验。

methods: {
  validateForm() {
    if (!this.username) {
      this.error = '请输入用户名'
      return false
    }
    if (!this.password) {
      this.error = '请输入密码'
      return false
    }
    return true
  },
  async handleLogin() {
    if (!this.validateForm()) return
    // 登录逻辑...
  }
}

vue登陆的实现