vue实现用户登录

Vue 实现用户登录功能

创建登录组件

在 src/components 目录下创建 Login.vue 文件，包含表单和提交逻辑：

<template>
  <div class="login">
    <form @submit.prevent="handleLogin">
      <input v-model="username" 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) {
        alert('登录失败: ' + error.response.data.message)
      }
    }
  }
}
</script>

配置路由

在 src/router/index.js 中设置登录路由：

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

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: Login
    }
  ]
})

设置 Axios 拦截器

在 src/main.js 中配置全局请求拦截：

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)
})

Vue.prototype.$axios = axios

实现路由守卫

在 src/router/index.js 中添加导航守卫：

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

后端 API 对接示例

假设后端使用 JWT 认证，登录接口应返回 token：

// 伪代码示例
app.post('/api/login', (req, res) => {
  const { username, password } = req.body
  if (validCredentials(username, password)) {
    const token = generateJWT(username)
    res.json({ token })
  } else {
    res.status(401).json({ message: '无效凭证' })
  }
})

状态管理（可选）

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

// store/modules/auth.js
export default {
  state: {
    token: localStorage.getItem('token') || null
  },
  mutations: {
    setToken(state, token) {
      state.token = token
      localStorage.setItem('token', token)
    },
    clearToken(state) {
      state.token = null
      localStorage.removeItem('token')
    }
  }
}

响应式布局建议

为登录页面添加基础样式：

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