基于Vue3和element-plus实现登录功能(最终完整版)

接下来我将为您讲解“基于Vue3和element-plus实现登录功能(最终完整版)”的完整攻略。

一、前置知识

在学习本教程前，需要掌握以下技术：

Vue3基础知识
Element Plus UI框架的使用
前端基础知识，如 HTTP 等协议、Cookie 和 Session 等概念
前端路由和组件化开发思想

二、实现步骤

1. 创建vue-cli项目

使用以下命令创建一个vue3项目：

vue create login-demo

2. 安装element-plus

在项目根目录中运行以下命令来安装element-plus：

npm install element-plus --save

将element-plus配置到main.js中：

import { createApp } from "vue"
import ElementPlus from 'element-plus'
import "element-plus/lib/theme-chalk/index.css";
import App from "./App.vue";
import router from "./router";

createApp(App).use(router).use(ElementPlus).mount("#app");

3. 创建登录页面和路由

在src/views文件夹下创建LoginPage.vue并实现基本布局，如下：

<template>
  <el-form class="login-box" ref="loginForm" :model="form" :rules="rules">
    <h3 class="title">用户登录</h3>
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="form.password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleSubmit">登录</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: "LoginPage",
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
      rules: {
        username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    handleSubmit() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          // TODO 登录逻辑
        } else {
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.loginForm.resetFields();
    },
  },
};
</script>

<style scoped>
.login-box {
  width: 320px;
  margin: 160px auto;
}

.title {
  text-align: center;
  margin-bottom: 30px;
}
</style>

修改router/index.js文件，添加登录页路由：

import { createRouter, createWebHistory } from 'vue-router'
import LoginPage from '@/views/LoginPage.vue'

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

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

4. 实现登录逻辑

在src/api文件夹中添加user.js文件，封装登录API：

import request from '@/utils/request'

export function login(data) {
  return request({
    url: '/login',
    method: 'POST',
    data: data
  })
}

在src/utils文件夹中新建request.js文件，使用axios封装请求：

import axios from "axios";

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000,
});

service.interceptors.request.use(
  (config) => {
    config.headers["Content-Type"] = "application/json;charset=UTF-8";
    return config;
  },
  (error) => {
    console.log(error); // for debug
    return Promise.reject(error);
  }
);

service.interceptors.response.use(
  (response) => {
    const res = response.data;

    return res;
  },
  (error) => {
    console.log("err" + error); // for debug
    return Promise.reject(error);
  }
);

export default service;

修改LoginPage.vue文件，添加登录逻辑：

import { login } from "@/api/user";

// ...

export default {
  name: "LoginPage",
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
      rules: {
        username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    handleSubmit() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          login(this.form).then(res => {
            if (res.code === 200) {
              this.$message.success(res.message);
              // TODO 成功登录跳转逻辑
            } else {
              this.$message.error(res.message);
            }
          }).catch(err => {
            console.error(err)
          })
        } else {
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.loginForm.resetFields();
    },
  },
};

这里我们发送的请求是POST请求，后端会在请求体中获取账号密码进行校验，返回给我们token用于后续的操作。

暂时我们只需要在请求头中添加Authorization字段（值为token）进行简单的校验，防止不是登录操作的请求访问敏感信息。

5. 实现登录后样式和功能

在LoginPage.vue文件登录成功的跳转逻辑处调用localStorage存储token，如下：

handleSubmit() {
  // ...

  if (valid) {
    login(this.form).then(res => {
      if (res.code === 200) {
        window.localStorage.setItem('token', res.data.token)

        this.$message.success(res.message);
        this.$router.push('/dashboard')
      } else {
        this.$message.error(res.message);
      }
    }).catch(err => {
      console.error(err)
    })
  } else {
    return false;
  }
}

在成功登录后跳转到Dashboard页面并显示菜单导航，如下：

<template>
  <el-container>
    <el-aside width="200px">
      <router-link to="/dashboard">Dashboard</router-link>
      <router-link to="/user">用户管理</router-link>
    </el-aside>
    <el-container>
      <el-header>Header</el-header>
      <el-main>Main</el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: "DashboardPage",
};
</script>

<style scoped></style>

在router/index.js中添加Dashboard页路由和路由守卫：

import { createRouter, createWebHistory } from 'vue-router'
import LoginPage from '@/views/LoginPage.vue'
import DashboardPage from '@/views/DashboardPage.vue'

const routes = [
  {
    path: '/',
    name: 'Login',
    component: LoginPage
  },
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: DashboardPage,
    meta: {
      requiresAuth: true
    }
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

router.beforeEach((to, from, next) => {
  const token = window.localStorage.getItem('token')

  if (to.meta.requiresAuth && !token) {
    next('/')
  } else {
    next()
  }
})

export default router

添加路由守卫后，若本地没有存储token，则无法进入Dashboard页，会被跳转到登录页。

三、示例

登录接口返回的JSON数据格式示例：

{
  "code": 200,
  "message": "登录成功",
  "data": {
    "token": "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwicm9sZXMiOlt7InVzZXJuYW1lIjoibG9uZyJ9XSwiaWF0IjoxNTE2MjM5MDIyfQ.sFOlsffBYyVBvCY6JPJT2z80T8Xbc1I5FjCO2PNn1UY",
    "user": {
      "id": 1,
      "username": "long",
      "roles": ["管理员"]
    }
  }
}

Dashboard页路由守卫的示例：

当没有登录时，访问Dashboard会被拒绝并跳转回登录页。

router.beforeEach((to, from, next) => {
  const token = window.localStorage.getItem('token')

  if (to.meta.requiresAuth && !token) {
    next('/')
  } else {
    next()
  }
})

以上便是“基于Vue3和element-plus实现登录功能(最终完整版)”的实现步骤及示例，希望对您有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于Vue3和element-plus实现登录功能(最终完整版) - Python技术站