vue登录模块实现

实现 Vue 登录模块

前端实现

创建登录表单组件，使用 v-model 绑定用户名和密码数据，通过 axios 发送登录请求。

<template>
  <div>
    <input v-model="username" placeholder="用户名" />
    <input v-model="password" type="password" placeholder="密码" />
    <button @click="handleLogin">登录</button>
  </div>
</template>

<script>
import axios from 'axios';

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

后端实现

使用 Node.js 和 Express 创建登录接口，验证用户凭证并返回 JWT 令牌。

const express = require('express');
const jwt = require('jsonwebtoken');
const app = express();

app.use(express.json());

app.post('/api/login', (req, res) => {
  const { username, password } = req.body;

  // 实际项目中应从数据库验证用户
  if (username === 'admin' && password === '123456') {
    const token = jwt.sign({ username }, 'secret_key', { expiresIn: '1h' });
    res.json({ token });
  } else {
    res.status(401).json({ error: '用户名或密码错误' });
  }
});

app.listen(3000, () => {
  console.log('服务器运行在 http://localhost:3000');
});

路由守卫

在 Vue 路由中设置全局前置守卫，保护需要认证的路由。

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

const router = new Router({
  routes: [
    { path: '/login', component: Login },
    { path: '/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();
  }
});

状态管理

使用 Vuex 管理用户认证状态。

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    token: localStorage.getItem('token') || null
  },
  mutations: {
    setToken(state, token) {
      state.token = token;
      localStorage.setItem('token', token);
    },
    clearToken(state) {
      state.token = null;
      localStorage.removeItem('token');
    }
  },
  actions: {
    login({ commit }, { username, password }) {
      return axios.post('/api/login', { username, password })
        .then(response => {
          commit('setToken', response.data.token);
        });
    },
    logout({ commit }) {
      commit('clearToken');
    }
  },
  getters: {
    isAuthenticated: state => !!state.token
  }
});

表单验证

使用 Vuelidate 添加表单验证规则。

import { required, minLength } from 'vuelidate/lib/validators';

export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  validations: {
    username: { required },
    password: { required, minLength: minLength(6) }
  },
  methods: {
    handleLogin() {
      this.$v.$touch();
      if (!this.$v.$invalid) {
        // 发送登录请求
      }
    }
  }
};

错误处理

在登录失败时显示错误信息。

<template>
  <div>
    <div v-if="error" class="error">{{ error }}</div>
    <!-- 表单内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      error: ''
    };
  },
  methods: {
    handleLogin() {
      axios.post('/api/login', {
        username: this.username,
        password: this.password
      })
      .catch(error => {
        this.error = '登录失败: ' + (error.response?.data?.error || '未知错误');
      });
    }
  }
};
</script>