当前位置：首页 > VUE

vue实现登录功能

2026-02-19 04:25:14VUE

创建登录表单组件

在 Vue 项目中新建一个登录组件（如 Login.vue），包含用户名和密码输入框及提交按钮。

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

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

实现登录请求

使用 axios 发送登录请求到后端接口，处理响应数据。

methods: {
  async handleSubmit() {
    try {
      const response = await axios.post('/api/login', {
        username: this.username,
        password: this.password
      });
      localStorage.setItem('token', response.data.token); // 存储 token
      this.$router.push('/dashboard'); // 跳转到主页
    } catch (error) {
      alert('登录失败: ' + error.response.data.message);
    }
  }
}

路由守卫验证登录状态

在 router/index.js 中配置全局前置守卫，检查用户是否已登录。

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

状态管理（可选）

使用 Vuex 集中管理用户登录状态和 token。

// store/index.js
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');
    }
  }
});

响应拦截处理 token 失效

在 axios 拦截器中检查 token 是否过期或无效。

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      store.commit('clearToken');
      router.push('/login');
    }
    return Promise.reject(error);
  }
);

表单验证（可选）

使用 vuelidate 或手动验证输入字段。

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

export default {
  validations: {
    username: { required },
    password: { required, minLength: minLength(6) }
  },
  methods: {
    handleSubmit() {
      this.$v.$touch();
      if (!this.$v.$invalid) {
        // 提交逻辑
      }
    }
  }
}

vue实现登录功能