vue登录如何实现

Vue 登录实现步骤

安装依赖
确保项目已安装 axios 或 fetch 用于发送网络请求，以及 vue-router 用于页面跳转：

npm install axios vue-router

创建登录表单组件
在 Login.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>

配置路由
在 router/index.js 中设置登录路由：

import Login from '@/views/Login.vue'

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

添加路由守卫
在路由配置中检查用户是否已认证：

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

后端接口对接
确保后端提供 /api/login 接口，接收 username 和 password，返回 token。示例响应格式：

{
  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
}

状态管理（可选）
对于复杂应用，可使用 Vuex 集中管理登录状态：

// store/index.js
export default new Vuex.Store({
  state: {
    user: null,
    token: null
  },
  mutations: {
    setUser(state, payload) {
      state.user = payload.user
      state.token = payload.token
    }
  }
})

在登录成功后调用：

this.$store.commit('setUser', {
  user: response.data.user,
  token: response.data.token
})