vue实现登陆

使用 Vue 实现登录功能

创建登录表单组件

在 Vue 项目中创建一个登录表单组件，包含用户名和密码输入框以及提交按钮。

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

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

<style scoped>
.login-form {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}
.form-group {
  margin-bottom: 15px;
}
label {
  display: block;
  margin-bottom: 5px;
}
input {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}
button {
  background-color: #42b983;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

添加登录逻辑

在 handleSubmit 方法中实现登录逻辑，通常需要调用 API 接口验证用户凭据。

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

      // 存储 token 或其他认证信息
      localStorage.setItem('token', response.data.token);

      // 跳转到主页
      this.$router.push('/');
    } catch (error) {
      console.error('登录失败:', error);
      alert('用户名或密码错误');
    }
  }
}

添加路由保护

创建路由守卫来保护需要认证的页面。

// 在 router/index.js 中
router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token');

  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

添加状态管理（可选）

对于大型应用，可以使用 Vuex 管理登录状态。

// store/index.js
const store = new Vuex.Store({
  state: {
    isAuthenticated: false,
    user: null
  },
  mutations: {
    login(state, user) {
      state.isAuthenticated = true;
      state.user = user;
    },
    logout(state) {
      state.isAuthenticated = false;
      state.user = null;
    }
  },
  actions: {
    async login({ commit }, credentials) {
      const response = await axios.post('/api/login', credentials);
      commit('login', response.data.user);
      localStorage.setItem('token', response.data.token);
    },
    logout({ commit }) {
      commit('logout');
      localStorage.removeItem('token');
    }
  }
});

处理登录后的导航

在登录成功后，根据用户角色或其他条件导航到不同页面。

handleSubmit() {
  this.$store.dispatch('login', {
    username: this.username,
    password: this.password
  }).then(() => {
    const redirectPath = this.$route.query.redirect || '/dashboard';
    this.$router.push(redirectPath);
  }).catch(error => {
    console.error('登录失败:', error);
  });
}

添加表单验证

使用 Vuelidate 或其他验证库增强表单验证。

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

export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  validations: {
    username: { required },
    password: { required, minLength: minLength(6) }
  },
  methods: {
    handleSubmit() {
      this.$v.$touch();
      if (this.$v.$invalid) return;

      // 提交逻辑
    }
  }
}

添加记住我功能

扩展登录表单，添加记住我选项并持久化登录状态。

data() {
  return {
    username: '',
    password: '',
    rememberMe: false
  }
},
methods: {
  handleSubmit() {
    if (this.rememberMe) {
      localStorage.setItem('rememberedUser', this.username);
    } else {
      localStorage.removeItem('rememberedUser');
    }
    // 其他登录逻辑
  },
  mounted() {
    const rememberedUser = localStorage.getItem('rememberedUser');
    if (rememberedUser) {
      this.username = rememberedUser;
      this.rememberMe = true;
    }
  }
}