当前位置：首页 > VUE

vue登录实现

2026-02-10 09:31:58VUE

Vue 登录功能实现

环境准备
确保已安装 Vue CLI 或 Vite 创建的项目，并安装必要的依赖（如 axios 用于网络请求、vue-router 用于路由跳转）。

npm install axios vue-router

登录页面组件

创建 Login.vue 文件，包含表单和基础校验逻辑：

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

<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      password: '',
      error: ''
    };
  },
  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 (err) {
        this.error = err.response?.data?.message || '登录失败';
      }
    }
  }
};
</script>

路由配置

在 router/index.js 中配置登录路由和守卫：

import { createRouter, createWebHistory } from 'vue-router';
import Login from '../views/Login.vue';
import Dashboard from '../views/Dashboard.vue';

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

const router = createRouter({
  history: createWebHistory(),
  routes
});

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

export default router;

后端接口模拟（可选）

使用 json-server 快速模拟登录 API：

vue登录实现

创建 db.json 文件：

{
"users": [
 { "id": 1, "username": "admin", "password": "123456" }
]
}

启动模拟服务：

vue登录实现

npx json-server --watch db.json --port 3000

修改 Login.vue 中的请求地址为 http://localhost:3000/users，根据实际返回调整逻辑。

状态管理（Vuex/Pinia）

使用 Pinia 管理登录状态（示例）：

创建 stores/auth.js：
```
import { defineStore } from 'pinia';
```

export const useAuthStore = defineStore('auth', { state: () => ({ token: localStorage.getItem('token') || null }), actions: { setToken(token) { this.token = token; localStorage.setItem('token', token); }, clearToken() { this.token = null; localStorage.removeItem('token'); } } });


2. 在组件中使用：
```javascript
import { useAuthStore } from '../stores/auth';

// 替换原有的 localStorage 操作
const authStore = useAuthStore();
authStore.setToken(response.data.token);