vue登录逻辑的实现

Vue 登录逻辑实现

前端实现

创建登录组件 在 Vue 项目中创建一个登录组件，通常命名为 Login.vue。该组件包含表单元素，如用户名和密码输入框，以及提交按钮。

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

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

配置路由 在路由配置文件中，将登录组件添加到路由中，并设置路由守卫以保护需要认证的路由。

import Vue from 'vue';
import Router from 'vue-router';
import Login from './views/Login.vue';
import Dashboard from './views/Dashboard.vue';

Vue.use(Router);

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

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

export default router;

后端实现

创建登录接口 后端需要提供一个登录接口，接收用户名和密码，验证成功后返回 token。

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

app.post('/api/login', (req, res) => {
  const { username, password } = req.body;
  if (username === 'admin' && password === 'password') {
    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');
});

状态管理

使用 Vuex 管理登录状态 如果需要全局管理登录状态，可以使用 Vuex 存储用户信息和 token。

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

Vue.use(Vuex);

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

安全性考虑

使用 HTTPS 确保登录请求通过 HTTPS 传输，防止敏感信息被窃取。

设置 Token 过期时间 在生成 token 时设置合理的过期时间，例如 1 小时或 24 小时。

验证用户输入 后端应对用户输入进行验证，防止 SQL 注入或其他攻击。

限制登录尝试次数 实现登录尝试次数限制，防止暴力破解。

错误处理

前端错误提示 在登录失败时，向用户显示友好的错误提示。

<template>
  <div>
    <form @submit.prevent="handleLogin">
      <input v-model="username" type="text" placeholder="用户名" />
      <input v-model="password" type="password" placeholder="密码" />
      <button type="submit">登录</button>
      <p v-if="error" class="error">{{ error }}</p>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      error: ''
    };
  },
  methods: {
    async handleLogin() {
      try {
        const response = await this.$axios.post('/api/login', {
          username: this.username,
          password: this.password
        });
        localStorage.setItem('token', response.data.token);
        this.$router.push('/dashboard');
      } catch (error) {
        this.error = '用户名或密码错误';
      }
    }
  }
};
</script>

后端错误响应 后端应返回详细的错误信息，帮助前端进行错误处理。

app.post('/api/login', (req, res) => {
  const { username, password } = req.body;
  if (!username || !password) {
    return res.status(400).json({ error: '用户名和密码不能为空' });
  }
  if (username === 'admin' && password === 'password') {
    const token = jwt.sign({ username }, 'secret_key', { expiresIn: '1h' });
    res.json({ token });
  } else {
    res.status(401).json({ error: '用户名或密码错误' });
  }
});