vue实现登录

实现登录功能的基本步骤

创建Vue项目并安装必要依赖，如vue-router和axios。使用vue-router管理路由，axios处理HTTP请求。

npm install vue-router axios

设置路由和登录页面

在router/index.js中配置路由，包括登录页面的路由。确保登录页面可以被未授权用户访问。

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

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: Login
  }
]

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

export default router

创建登录组件

在Login.vue中实现登录表单，包含用户名和密码输入字段，以及提交按钮。使用v-model绑定表单数据。

<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <input v-model="username" placeholder="Username" />
      <input v-model="password" type="password" placeholder="Password" />
      <button type="submit">Login</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    handleSubmit() {
      // 登录逻辑
    }
  }
}
</script>

实现登录逻辑

在handleSubmit方法中，使用axios发送POST请求到后端API。处理成功和失败的响应。

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) {
      console.error('Login failed:', error)
    }
  }
}

添加路由守卫

在router/index.js中添加全局前置守卫，检查用户是否已登录。未登录用户尝试访问受保护路由时重定向到登录页面。

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token')
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

处理登出功能

创建登出按钮和方法，清除本地存储的token并重定向到登录页面。

methods: {
  logout() {
    localStorage.removeItem('token')
    this.$router.push('/login')
  }
}

样式优化

为登录页面添加基本样式，改善用户体验。可以使用CSS或UI框架如Element Plus或Vuetify。

form {
  max-width: 300px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
input {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
}
button {
  width: 100%;
  padding: 10px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
}

错误处理和反馈

添加错误提示，当登录失败时显示错误信息给用户。

<template>
  <div v-if="error" class="error">{{ error }}</div>
</template>

<script>
export default {
  data() {
    return {
      error: ''
    }
  },
  methods: {
    async handleSubmit() {
      try {
        // ...登录逻辑
      } catch (error) {
        this.error = 'Invalid username or password'
      }
    }
  }
}
</script>