当前位置：首页 > VUE

vue登录业务的实现

2026-02-25 21:08:47VUE

前端实现（Vue.js）

在Vue中实现登录业务通常需要创建登录表单、处理用户输入、发送请求到后端API并处理响应。

创建登录表单组件

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

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    async handleLogin() {
      try {
        const response = await this.$axios.post('/api/login', this.form)
        localStorage.setItem('token', response.data.token)
        this.$router.push('/dashboard')
      } catch (error) {
        console.error('登录失败:', error)
      }
    }
  }
}
</script>

配置axios拦截器 在main.js或单独的文件中配置axios全局拦截器：

import axios from 'axios'

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

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

后端实现（Node.js示例）

后端需要提供登录接口，验证用户凭证并返回token。

Express路由示例

const express = require('express')
const jwt = require('jsonwebtoken')
const router = express.Router()

router.post('/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: '用户名或密码错误' })
  }

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

  res.json({ token })
})

状态管理（Vuex）

使用Vuex管理用户登录状态和token。

store/auth.js

const state = {
  token: localStorage.getItem('token') || '',
  user: null
}

const mutations = {
  SET_TOKEN(state, token) {
    state.token = token
    localStorage.setItem('token', token)
  },
  CLEAR_AUTH(state) {
    state.token = ''
    state.user = null
    localStorage.removeItem('token')
  }
}

const actions = {
  login({ commit }, credentials) {
    return axios.post('/api/login', credentials)
      .then(response => {
        commit('SET_TOKEN', response.data.token)
        return response
      })
  },
  logout({ commit }) {
    commit('CLEAR_AUTH')
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

路由守卫

使用Vue Router的导航守卫保护需要认证的路由。

router.js

router.beforeEach((to, from, next) => {
  const isAuthenticated = !!localStorage.getItem('token')

  if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})