当前位置：首页 > VUE

vue 实现简单登陆

2026-03-06 16:55:03VUE

Vue 实现简单登录功能

创建 Vue 项目

使用 Vue CLI 创建一个新项目：

vue create login-demo

安装必要依赖

安装 axios 用于 HTTP 请求：

npm install axios

创建登录组件

在 src/components 目录下创建 Login.vue 文件：

vue 实现简单登陆

<template>
  <div class="login-container">
    <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>
import axios from 'axios';

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

<style scoped>
.login-container {
  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 {
  padding: 10px 15px;
  background-color: #42b983;
  color: white;
  border: none;
  cursor: pointer;
}
</style>

配置路由

在 src/router/index.js 中配置路由：

import Vue from 'vue';
import VueRouter from 'vue-router';
import Login from '../components/Login.vue';
import Dashboard from '../components/Dashboard.vue';

Vue.use(VueRouter);

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

const router = new VueRouter({
  routes,
});

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;

创建模拟 API

在 src/main.js 中模拟 API 请求：

vue 实现简单登陆

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import axios from 'axios';

axios.interceptors.request.use(config => {
  if (config.url === '/api/login') {
    return new Promise(resolve => {
      setTimeout(() => {
        if (
          config.data.username === 'admin' &&
          config.data.password === '123456'
        ) {
          resolve({
            data: { token: 'fake-jwt-token' },
          });
        } else {
          resolve({
            data: { error: 'Invalid credentials' },
          });
        }
      }, 500);
    });
  }
  return config;
});

Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App),
}).$mount('#app');

创建 Dashboard 组件

在 src/components 目录下创建 Dashboard.vue 文件：

<template>
  <div>
    <h2>欢迎来到仪表盘</h2>
    <button @click="handleLogout">退出登录</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleLogout() {
      localStorage.removeItem('token');
      this.$router.push('/login');
    },
  },
};
</script>