🚀前言

在当今的数字经济时代，电子商务已成为商业运营的重要组成部分。一个高效、稳定的电商后台管理系统是确保企业顺利运营的关键。作为电商系统的核心组成部分，用户登录模块不仅关乎系统的安全性，还直接影响到用户的体验和满意度。

本文将带你深入探讨电商后台管理系统中用户登录模块的开发实战。我们将从项目需求分析入手，逐步引导你实现一个功能齐全的用户登录模块，包括用户注册、登录验证、密码重置等功能。通过使用现代前端技术（如 Vue.js）和后端框架（如 Node.js 或 Express），我们将展示如何实现安全、高效的用户认证机制。

🚀一、用户登录模块开发

🔎1. 项目搭建

首先，我们需要创建一个新的 Vue 项目并安装必要的依赖模块。

🦋1.1 创建 Vue 项目

在终端中执行以下命令来创建一个新的 Vue 项目：

npm create vite@latest

在创建过程中设置项目名称为 shop-admin。

🦋1.2 安装依赖

进入项目目录后，安装 Vue Router 和 Pinia：

npm install vue-router@4 --save
npm install pinia --save

确保 package.json 文件中包含了 vue-router 和 pinia 模块。

🦋1.3 项目结构

删除默认的 HelloWorld.vue 文件。在 components 文件夹下新建 home 和 login 两个子文件夹，并分别创建 Home.vue 和 Login.vue 文件。

components/
  home/
    Home.vue
  login/
    Login.vue

示例代码：

<!-- Home.vue -->
<template>
  主页
</template>

<!-- Login.vue -->
<template>
  登录页面
</template>

🔎2. 全局状态管理

在 src 文件夹下新建一个 tools 文件夹，并在其中创建 Storage.js 文件。

src/
  tools/
    Storage.js

🦋2.1 Storage.js

// src/tools/Storage.js
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';

const Store = defineStore("UserStore", () => {
  // 全局存储用户名和密码
  const userName = ref("");
  const userPassword = ref("");

  // 进行是否登录的判断
  const isLogin = computed(() => {
    return userName.value.length > 0;
  });

  // 清除缓存的用户信息，登出使用
  const clearUserInfo = () => {
    userName.value = "";
    userPassword.value = "";
  };

  // 注册用户信息，登录使用
  const registUserInfo = (name, password) => {
    userName.value = name;
    userPassword.value = password;
  };

  return { userName, userPassword, isLogin, clearUserInfo, registUserInfo };
});

export default Store;

🔎3. 路由配置

在 tools 文件夹下新建 Router.js 文件，用于路由配置。

// src/tools/Router.js
import { createRouter, createWebHashHistory } from 'vue-router';
import Login from '../components/login/Login.vue';
import Home from '../components/home/Home.vue';
import store from '../tools/Storage';

// 创建路由实例
const Router = createRouter({
  history: createWebHashHistory(),
  routes: [
    { path: '/login', component: Login, name: "login" },
    { path: '/home', component: Home, name: "home" }
  ]
});

// 路由守卫，当未登录时，非登录页面的任何页面都不允许跳转
Router.beforeEach((to, from, next) => {
  const userStore = store();
  let isLogin = userStore.isLogin;
  if (isLogin || to.name === "login") {
    next();
  } else {
    next({ name: "login" });
  }
});

export default Router;

🔎4. 修改 App.vue

为 App.vue 文件添加路由渲染出口：

// src/App.vue
<template>
  <router-view></router-view>
</template>

🔎5. 初始化项目

在 main.js 文件中完成基础的初始化工作：

// src/main.js
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import Router from './tools/Router';
import App from './App.vue';

const app = createApp(App);
app.use(createPinia());
app.use(Router);
app.mount('#app');

🔎6. 用户登录页面开发

🦋6.1 安装 Element Plus

npm install element-plus --save
npm install element-plus/icons-vue --save

🦋6.2 引入 Element Plus

在 main.js 文件中添加 Element Plus 模块的相关初始化代码：

// src/main.js
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import Router from './tools/Router';
import App from './App.vue';

const app = createApp(App);

// 遍历 ElementPlusIconsVue 中的所有组件进行注册
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}

app.use(ElementPlus);
app.use(createPinia());
app.use(Router);
app.mount('#app');

🦋6.3 修改 Storage.js

为 Storage.js 文件添加两个修改用户状态的方法：

// src/tools/Storage.js
const Store = defineStore("UserStore", () => {
  const userName = ref("");
  const userPassword = ref("");

  const isLogin = computed(() => {
    return userName.value.length > 0;
  });

  const clearUserInfo = () => {
    userName.value = "";
    userPassword.value = "";
  };

  const registUserInfo = (name, password) => {
    userName.value = name;
    userPassword.value = password;
  };

  return { userName, userPassword, isLogin, clearUserInfo, registUserInfo };
});

export default Store;

🦋6.4 完善 Login.vue

<!-- src/components/login/Login.vue -->
<script setup>
import Storage from "../../tools/Storage";
import { ElMessage } from 'element-plus';
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';

const store = Storage();
const router = useRouter();

const name = ref("");
const password = ref("");

const disabled = computed(() => {
  return name.value.length == 0 || password.value.length == 0;
});

function login() {
  store.registUserInfo(name.value, password.value);
  ElMessage({
    message: '登录成功',
    type: 'success',
    duration: 3000,
  });
  setTimeout(() => {
    router.push({ name: "home" });
  }, 3000);
}
</script>

<template>
  <div id="container">
    <div id="title">
      <h1>电商后台管理系统</h1>
    </div>
    <div class="input">
      <el-input v-model="name" prefix-icon="user" placeholder="请输入用户名"></el-input>
    </div>
    <div class="input">
      <el-input v-model="password" prefix-icon="lock" placeholder="请输入密码" auto-complete="new-password" show-password></el-input>
    </div>
    <div class="input">
      <el-button @click="login" style="width:500px" type="primary" :disabled="disabled">登录</el-button>
    </div>
  </div>
</template>

<style scoped>
#container {
  background: #595959;
  background-image: url("/public/login_bg.jpg");
  height: 100vh;
  width: 100vw;
  position: absolute;
}
#title {
  text-align: center;
  color: azure;
  margin-top: 200px;
}
.input {
  margin: 20px auto;
  width: 500px;
}
</style>

🔎7.总结

以上就是一个简单的 Vue 后台管理系统的基础搭建和用户登录模块的实现。运行代码后，无论输入怎样的页面路径，页面都会被重定向到登录页面。在登录成功后，页面会跳转到后台管理系统的主页。