vue cli实现登录

Vue CLI 实现登录功能

环境准备 确保已安装 Vue CLI 和 Node.js。通过以下命令创建新项目：

vue create login-demo

安装依赖 需要安装 Vue Router 和 Axios 进行路由管理和 HTTP 请求：

npm install vue-router axios

项目结构

src/
├── components/
│   └── Login.vue
├── router/
│   └── index.js
├── views/
│   ├── Home.vue
│   └── Dashboard.vue
└── App.vue

登录组件实现

Login.vue

<template>
  <div class="login">
    <h2>登录</h2>
    <form @submit.prevent="handleLogin">
      <input v-model="username" placeholder="用户名" required>
      <input v-model="password" type="password" placeholder="密码" required>
      <button type="submit">登录</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

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

路由配置

router/index.js

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

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/dashboard',
      name: 'Dashboard',
      component: Dashboard,
      meta: { requiresAuth: true }
    }
  ]
});

路由守卫

在 router/index.js 中添加全局前置守卫：

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

API 请求拦截

在 main.js 中配置 Axios 请求拦截器：

import axios from 'axios';

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

样式优化

添加基础样式到 Login.vue：

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

后端接口模拟

创建 mockServer.js 用于开发测试：

const express = require('express');
const app = express();
app.use(express.json());

app.post('/api/login', (req, res) => {
  const { username, password } = req.body;
  if (username === 'admin' && password === '123456') {
    res.json({ token: 'fake-jwt-token' });
  } else {
    res.status(401).json({ error: '认证失败' });
  }
});

app.listen(3001, () => console.log('Mock server running on port 3001'));

生产环境配置

在 vue.config.js 中配置代理：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3001',
        changeOrigin: true
      }
    }
  }
};

用户状态管理

对于复杂应用，建议使用 Vuex 管理登录状态：

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    user: null,
    isAuthenticated: false
  },
  mutations: {
    setUser(state, user) {
      state.user = user;
      state.isAuthenticated = !!user;
    }
  },
  actions: {
    login({ commit }, credentials) {
      return axios.post('/api/login', credentials)
        .then(response => {
          commit('setUser', response.data.user);
          localStorage.setItem('token', response.data.token);
        });
    }
  }
});