vue怎么实现简单登录

Vue实现简单登录功能

创建登录表单组件

在Vue项目中创建一个Login.vue组件，包含用户名和密码输入框以及提交按钮：

<template>
  <div class="login-container">
    <h3>用户登录</h3>
    <form @submit.prevent="handleSubmit">
      <div class="form-group">
        <label>用户名</label>
        <input v-model="username" type="text" required>
      </div>
      <div class="form-group">
        <label>密码</label>
        <input v-model="password" type="password" required>
      </div>
      <button type="submit">登录</button>
    </form>
  </div>
</template>

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

添加表单验证

在提交前进行简单的客户端验证：

methods: {
  handleSubmit() {
    if (!this.username || !this.password) {
      alert('请输入用户名和密码');
      return;
    }
    this.login();
  }
}

实现登录API调用

使用axios发送登录请求到后端API：

import axios from 'axios';

methods: {
  async login() {
    try {
      const response = await axios.post('/api/login', {
        username: this.username,
        password: this.password
      });

      if (response.data.success) {
        localStorage.setItem('token', response.data.token);
        this.$router.push('/dashboard');
      } else {
        alert(response.data.message);
      }
    } catch (error) {
      alert('登录失败');
      console.error(error);
    }
  }
}

路由配置

在router/index.js中配置登录路由和受保护路由：

import Vue from 'vue';
import Router from 'vue-router';
import Login from '@/components/Login';
import Dashboard from '@/components/Dashboard';

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/dashboard',
      name: 'Dashboard',
      component: Dashboard,
      meta: { requiresAuth: true }
    }
  ]
});

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

export default router;

状态管理（可选）

对于更复杂的应用，可以使用Vuex管理登录状态：

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    isAuthenticated: false,
    user: null
  },
  mutations: {
    loginSuccess(state, user) {
      state.isAuthenticated = true;
      state.user = user;
    },
    logout(state) {
      state.isAuthenticated = false;
      state.user = null;
    }
  },
  actions: {
    login({ commit }, credentials) {
      return axios.post('/api/login', credentials)
        .then(response => {
          commit('loginSuccess', response.data.user);
          localStorage.setItem('token', response.data.token);
        });
    }
  }
});

样式优化

添加基本样式增强用户体验：

.login-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}

button {
  background: #42b983;
  color: white;
  padding: 10px 15px;
  border: none;
  cursor: pointer;
}