vue实现登录功能

创建登录页面组件

在 src/views 目录下新建 Login.vue 文件，包含表单元素（用户名、密码输入框和提交按钮）：

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

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

配置路由

在 src/router/index.js 中添加登录页路由：

import Login from '@/views/Login.vue';

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: Login
  }
];

封装请求工具

在 src/utils/request.js 中配置 Axios 实例，添加请求拦截器（如 token 验证）：

import axios from 'axios';

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

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

export default instance;

状态管理（可选）

使用 Vuex 管理用户登录状态（src/store/modules/user.js）：

const state = {
  token: localStorage.getItem('token') || '',
  userInfo: null
};

const mutations = {
  SET_TOKEN(state, token) {
    state.token = token;
    localStorage.setItem('token', token);
  },
  CLEAR_TOKEN(state) {
    state.token = '';
    localStorage.removeItem('token');
  }
};

export default {
  namespaced: true,
  state,
  mutations
};

添加路由守卫

在 src/router/index.js 中配置全局前置守卫，限制未登录访问：

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token');
  if (to.name !== 'Login' && !isAuthenticated) {
    next({ name: 'Login' });
  } else {
    next();
  }
});

后端接口示例（Node.js）

提供简单的登录接口实现：

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

样式优化

添加基础样式（Login.vue 的 <style> 部分）：

.login-container {
  max-width: 300px;
  margin: 0 auto;
  padding: 20px;
}
input, button {
  width: 100%;
  margin: 10px 0;
  padding: 8px;
}