如何使用 Vue 3 实现前端登录页面

Mobile Apps Login Screen by andikamelodiest on DeviantArt

在现代 web 应用中，用户认证是一个至关重要的功能。本文将全面介绍如何使用 Vue 3 结合 Element Plus、Vue Router 和 Axios 创建一个功能齐全的前端登录页面。我们将涵盖项目初始化、依赖安装、组件创建、路由配置、表单验证、API 交互以及样式设计等方面，确保您能够顺利构建出一个专业且高效的登录界面。

步骤一：项目初始化

首先，您需要初始化一个新的 Vue 3 项目。可以选择使用 Vite 或 Vue CLI 进行项目创建。本文将以 Vite 为例，但同样适用于 Vue CLI。

1. 使用 Vite 创建项目

npm create vite@latest my-vue3-login-app -- --template vue
cd my-vue3-login-app
npm install

上述命令将创建一个名为 my-vue3-login-app 的新项目，并安装所需的依赖。

2. 启动开发服务器

npm run dev

运行后，您可以在浏览器中访问 http://localhost:3000 查看项目。

步骤二：安装必要的依赖

为了构建美观且功能齐全的登录页面，我们将使用以下库：

Element Plus：一个基于 Vue 3 的组件库，提供丰富的 UI 组件。
Vue Router：用于管理应用的路由。
Axios：用于发送 HTTP 请求，与后端进行数据交互。
Vuex（可选）：用于状态管理，存储用户认证信息。

1. 安装 Element Plus 和 Axios

npm install element-plus axios

2. 安装 Vue Router

npm install vue-router@4

3. 安装 Vuex（可选）

npm install vuex@4

步骤三：配置项目

1. 引入 Element Plus

在 main.js 中引入并全局注册 Element Plus：


// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

// 可选：引入 Vuex
import store from './store'

const app = createApp(App)
app.use(router)
app.use(ElementPlus)
// 可选：注册 Vuex
app.use(store)
app.mount('#app')

2. 配置路由

在 src/router/index.js 中配置路由，添加登录页面和首页路由：


// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import Login from '../views/Login.vue'

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

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

export default router

3. 配置 Vuex（可选）

如果选择使用 Vuex 进行状态管理，可以在 src/store/index.js 中进行配置：


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

const store = createStore({
  state() {
    return {
      userToken: ''
    }
  },
  mutations: {
    setUserToken(state, token) {
      state.userToken = token
    },
    clearUserToken(state) {
      state.userToken = ''
    }
  },
  actions: {},
  modules: {}
})

export default store

4. 配置 Axios

为了简化 API 请求，创建一个 Axios 实例并配置基础 URL 和拦截器。在 src/utils/axios.js 中：


// src/utils/axios.js
import axios from 'axios'

const instance = axios.create({
  baseURL: 'http://localhost:3000', // 替换为您的后端 API 地址
  timeout: 10000
})

// 请求拦截器
instance.interceptors.request.use(
  config => {
    // 可在此处添加认证信息，如 token
    // const token = localStorage.getItem('token')
    // if (token) {
    //   config.headers.Authorization = `Bearer ${token}`
    // }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 响应拦截器
instance.interceptors.response.use(
  response => {
    return response.data
  },
  error => {
    return Promise.reject(error)
  }
)

export default instance

步骤四：创建登录组件

在 src/views 目录下创建 Login.vue 文件，编写登录页面的实现：

步骤五：创建首页组件

为了演示登录后的跳转效果，我们需要创建一个简单的首页组件。在 src/views 目录下创建 Home.vue 文件：

步骤六：实现后台 API（可选）

为了完整地测试登录功能，您可以搭建一个简单的后端 API。以下是使用 Node.js 和 Express 实现的示例：


// server.js
const express = require('express')
const bodyParser = require('body-parser')
const cors = require('cors')

const app = express()
const PORT = 3000

app.use(cors())
app.use(bodyParser.json())

// 模拟用户数据
const users = [
  { username: 'admin', password: 'admin123' },
  { username: 'user', password: 'user123' }
]

app.post('/api/login', (req, res) => {
  const { username, password } = req.body
  const user = users.find(u => u.username === username && u.password === password)

  if (user) {
    res.json({ success: true, message: '登录成功', token: 'fake-jwt-token' })
  } else {
    res.json({ success: false, message: '用户名或密码错误' })
  }
})

app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`)
})

启动后端服务

确保您已经安装了 Node.js 和必要的依赖，然后在项目根目录运行以下命令：

npm install express body-parser cors
node server.js

这将启动一个在 http://localhost:3000 监听的服务器，用于处理登录请求。

步骤七：测试登录页面

确保前后端服务均已启动。打开浏览器访问 http://localhost:3000/login，输入有效的用户名和密码（如 admin/admin123），点击登录按钮。如果一切配置正确，您将被重定向到首页，并在登录后显示成功消息。

步骤八：完善与优化

1. 添加表单验证规则

在 Login.vue 中，已配置基本的表单验证规则。您可以根据实际需求，进一步完善规则，例如添加密码强度验证、用户输入格式验证等。

2. 增强安全性

在实际应用中，建议采取以下安全措施：

**加密传输**：使用 HTTPS 确保数据在传输过程中加密。
**Token 管理**：使用 JWT（JSON Web Token）进行用户认证与授权，并在客户端安全存储 Token。
**后端验证**：在后端对用户输入进行严格验证，防止 SQL 注入、XSS 等攻击。
**密码加密**：后端应使用强哈希算法（如 bcrypt）对用户密码进行加密存储。

3. 状态管理与持久化

使用 Vuex 进行全局状态管理，可以更高效地管理用户认证信息。此外，可以结合 localStorage 或 sessionStorage 实现 Token 的持久化，确保用户在刷新页面后仍保持登录状态。

4. 路由守卫

使用 Vue Router 的导航守卫，保护需要认证的路由，防止未登录用户访问。例如，在 router/index.js 中添加全局前置守卫：


// src/router/index.js
router.beforeEach((to, from, next) => {
  const publicPages = ['/login']
  const authRequired = !publicPages.includes(to.path)
  const token = store.state.userToken || localStorage.getItem('token')

  if (authRequired && !token) {
    return next('/login')
  }

  next()
})

这段代码将确保用户在访问需要认证的页面时，若未登录则重定向到登录页面。