当前位置：首页 > VUE

vue js实现登录

2026-02-19 15:38:19VUE

Vue.js 实现登录功能

环境准备
确保已安装 Vue.js 和必要的依赖（如 Vue Router、Axios）。通过以下命令初始化项目并安装依赖：

npm install vue-router axios

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

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

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      error: ''
    };
  },
  methods: {
    async handleLogin() {
      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 = '登录失败，请检查凭证';
      }
    }
  }
};
</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) => {
  if (to.meta.requiresAuth && !localStorage.getItem('token')) {
    next('/login');
  } else {
    next();
  }
});

export default router;

API 请求封装
使用 Axios 封装全局请求，并添加 token 拦截器：

// utils/api.js
import axios from 'axios';

const api = axios.create({
  baseURL: 'http://your-api-url.com'
});

api.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

export default api;

状态管理（可选）
如需全局管理用户状态，可使用 Vuex：

// store/index.js
import { createStore } from 'vuex';

export default createStore({
  state: {
    user: null
  },
  mutations: {
    setUser(state, user) {
      state.user = user;
    }
  },
  actions: {
    async login({ commit }, credentials) {
      const response = await api.post('/login', credentials);
      commit('setUser', response.data.user);
    }
  }
});

样式与优化

vue js实现登录