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

news2024/12/25 9:00:38

创建一个登录页面的组件，可以使用Element Plus提供的表单组件来设计登录表单。在表单中，可以使用v-model指令来绑定用户输入的用户名和密码。
在登录页面的组件中，可以使用Vue3的响应式数据来保存用户输入的用户名和密码。
创建一个登录方法，当用户点击登录按钮时触发。在登录方法中，可以使用axios或其他HTTP库来向后端发送登录请求。
在后端接收到登录请求后，可以验证用户输入的用户名和密码是否正确。如果正确，可以返回一个登录成功的响应。
在前端，可以根据后端返回的登录成功响应，进行相应的处理。例如，可以将用户登录状态保存在Vuex或localStorage中，以便在其他页面中使用。

chatgpt给了思路之后，我们来拆解一下实现的步骤

1 创建登录页面

打开我们的工程，在views文件夹下创建一个LoginPage.vue的文件
在这里插入图片描述
我们先不写复杂的逻辑，只是显示登录页面，有用户名和密码，输入之后跳转到首页

<template>
  <div class="login-container">
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-position="top">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="loginForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="loginForm.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="login">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    login() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          // 登录逻辑，可以发送请求到后端进行验证
          console.log('登录成功');
          // 登录成功后跳转到首页
          this.$router.push('/');
        } else {
          console.log('表单验证失败');
        }
      });
    }
  }
};
</script>

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

然后在router文件夹下的index.js配置登录功能的路由
在这里插入图片描述

import { createRouter, createWebHistory } from 'vue-router';
import HomePage from '@/views/HomePage.vue';
import CategroyPage from '@/views/CategoryPage.vue';
import ProductPage from '@/views/ProductPage.vue';
import IndexPage from '@/views/IndexPage.vue';
import LoginPage from '@/views/LoginPage.vue';
const routes = [
  {
    path: '/',
    component: HomePage,
    redirect:"index",
    children: [
      {
        path:'/index',
        component:IndexPage
      },
      {
      path: '/category',
      component: CategroyPage
    }, {
      path: '/product',
      component: ProductPage
    }]
  },
  {
    path: '/category',
    component: CategroyPage
  },
  {
    path: '/login',
    component:LoginPage
  }
];

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

export default router;

在Terminal里启动工程，在浏览器里输入http://localhost:8080/login查看页面是否正常显示
在这里插入图片描述

2 验证用户身份

我们现在是必须输入登录页的路由才可以打开登录页，我们需要的效果是当访问应用的根目录时，就自主的判断用户是否登录了，如果已经登录那么就放行，如果未登录就跳转到登录页，要求用户登录。

为了实现上边的逻辑，vue的路由有全局守卫的概念，这个守卫会拦截每一个路由，来校验身份。我们在router文件夹下的index.js里加入全局守卫的代码

import { createRouter, createWebHistory } from 'vue-router';
import HomePage from '@/views/HomePage.vue';
import CategroyPage from '@/views/CategoryPage.vue';
import ProductPage from '@/views/ProductPage.vue';
import IndexPage from '@/views/IndexPage.vue';
import LoginPage from '@/views/LoginPage.vue';
const routes = [
  {
    path: '/',
    component: HomePage,
    name:'Home',
    redirect:"index",
    children: [
      {
        path:'/index',
        component:IndexPage
      },
      {
      path: '/category',
      component: CategroyPage
    }, {
      path: '/product',
      component: ProductPage
    }]
  },
  {
    path: '/category',
    component: CategroyPage
  },
  {
    path: '/login',
    name:'Login',
    component:LoginPage
  }
];

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


router.beforeEach((to, from, next) => {
  const isAuthenticated = false;/* 判断用户是否已登录 */
  
  if (to.name !== 'Login' && !isAuthenticated) {
    next({ name: 'Login' });
  } else if (to.name === 'Login' && isAuthenticated) {
    next({ name: 'Home' });
  } else {
    next();
  }
});
export default router;