vue3+elementplus后台管理系统，实现用户登录

**Vue3 + Element Plus 后台管理系统**

###项目结构

bashproject├── src│ ├── main.js│ ├── App.vue│ ├── components│ │ └── Login.vue│ ├── store│ │ ├── index.js│ │ └── modules│ │ └── user.js│ ├── router│ │ └── index.js│ └── utils│ └── auth.js├── public└── package.json

vue<template>
 <div class="login-container">
 <el-form ref="form" :model="form" label-width="0" class="login-form">
 <el-form-item prop="username">
 <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
 </el-form-item>
 <el-form-item prop="password">
 <el-input type="password"
 v-model="form.password"
 placeholder="请输入密码"
 @keyup.enter.native="handleLogin"
 ></el-input>
 </el-form-item>
 <el-button type="primary" style="width:100%" @click="handleLogin">登录</el-button>
 </el-form>
 </div>
</template>

<script>
export default {
 name: "Login",
 data() {
 return {
 form: {
 username: "",
 password: ""
 }
 };
 },
 methods: {
 handleLogin() {
 // TODO: 验证用户名和密码 this.$store.dispatch("user/login", this.form).then(() => {
 this.$router.push({ name: "Dashboard" });
 });
 }
 }
};
</script>

<style scoped>
.login-container {
 width:100%;
 height:100vh;
 display: flex;
 justify-content: center;
 align-items: center;
}

.login-form {
 padding:20px;
 border-radius:10px;
 box-shadow:0010px rgba(0,0,0,0.1);
}
</style>

javascriptimport { defineStore } from "vuex";

export default defineStore("user", {
 state: () => ({}),
 mutations: {},
 actions: {
 async login({ commit }, payload) {
 // TODO: 验证用户名和密码 const response = await fetch("/api/login", {
 method: "POST",
 headers: { "Content-Type": "application/json" },
 body: JSON.stringify(payload)
 });
 const data = await response.json();
 if (data.success) {
 commit("SET_TOKEN", data.token);
 return true;
 } else {
 throw new Error(data.message);
 }
 }
 }
});

javascriptimport { createRouter, createWebHistory } from "vue-router";
import Login from "../views/Login.vue";

export default createRouter({
 history: createWebHistory(),
 routes: [
 {
 path: "/login",
 name: "Login",
 component: Login,
 meta: { title: "登录" }
 },
 {
 path: "/dashboard",
 name: "Dashboard",
 component: () => import("../views/Dashboard.vue"),
 meta: { title: "仪表盘", requiresAuth: true }
 }
 ]
});

javascriptimport axios from "axios";

const instance = axios.create({
 baseURL: "/api",
 timeout:10000,
 headers: {
 "Content-Type": "application/json"
 }
});

export default async function login(username, password) {
 try {
 const response = await instance.post("/login", { username, password });
 return response.data;
 } catch (error) {
 throw new Error(error.message);
 }
}

javascriptimport { useStore } from "vuex";
import { login } from "../utils/auth";

const store = useStore();

try {
 const data = await login("username", "password");
 if (data.success) {
 store.dispatch("user/login", data);
 this.$router.push({ name: "Dashboard" });
 }
} catch (error) {
 console.error(error.message);
}