当前位置：首页 > VUE

vue前端登录实现

2026-01-19 22:28:14VUE

登录功能实现步骤

使用Vue实现前端登录功能通常需要结合Vue Router和状态管理工具（如Vuex或Pinia），以下是一个典型的实现方案：

安装必要依赖 确保项目已安装vue-router和axios：

npm install vue-router axios

创建登录组件 在src/components/Login.vue中创建登录表单：

vue前端登录实现

<template>
  <div class="login">
    <form @submit.prevent="handleSubmit">
      <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 handleSubmit() {
      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>

配置路由 在src/router/index.js中设置路由守卫：

import { createRouter, createWebHistory } from 'vue-router'
import Login from '../components/Login.vue'
import Dashboard from '../components/Dashboard.vue'

const routes = [
  { path: '/login', component: Login },
  { path: '/dashboard', component: Dashboard, meta: { requiresAuth: true } }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

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

export default router

状态管理（可选） 使用Pinia管理用户状态（src/stores/user.js）：

vue前端登录实现

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    isAuthenticated: !!localStorage.getItem('token')
  }),
  actions: {
    login(token) {
      localStorage.setItem('token', token)
      this.isAuthenticated = true
    },
    logout() {
      localStorage.removeItem('token')
      this.isAuthenticated = false
    }
  }
})

安全注意事项

使用HTTPS协议传输登录数据
前端验证仅作为辅助，后端必须进行完整验证
敏感信息不应存储在localStorage，考虑使用httpOnly cookies
实现CSRF保护机制
密码字段应进行前端加密（如bcryptjs）

扩展功能建议

记住登录状态

// 登录时
if (this.rememberMe) {
  localStorage.setItem('rememberToken', response.data.rememberToken)
}

验证码集成

<template>
  <img :src="captchaUrl" @click="refreshCaptcha">
  <input v-model="captcha" placeholder="验证码">
</template>

<script>
export default {
  data() {
    return {
      captchaUrl: '/api/captcha?' + Date.now(),
      captcha: ''
    }
  },
  methods: {
    refreshCaptcha() {
      this.captchaUrl = '/api/captcha?' + Date.now()
    }
  }
}
</script>

第三方登录 集成OAuth2.0流程，使用像vue3-google-login这样的库实现社交登录。

标签: vue