登录功能实现

src/components/LoginView.vue

@@ -0,0 +1,57 @@
+<template>
+    <h1 style="text-align: center;">登录</h1>
+    <el-card style="display: flex; justify-content: center; align-items: center; height: 100vh;">
+        <el-form :model="login">
+            <el-form-item label="账号">
+                <el-input v-model="login.account" placeholder="请输入手机号" clearable @input="inputCheck"></el-input>
+            </el-form-item>
+            <el-form-item label="密码">
+                <el-container>
+                    <el-input v-model="login.captcha" placeholder="请输入验证码" clearable @input="inputCheck"></el-input>
+                    <el-button type="primary" @click="sendCaptcha">发送验证码</el-button>
+                </el-container>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" @click="loginIn" style="width: 100%;">登录</el-button>
+            </el-form-item>
+        </el-form>
+    </el-card>
+</template>
+
+<script setup>
+import { reactive } from 'vue'
+import axios from 'axios'
+import router from '../router'
+
+const login = reactive({
+    account: '',
+    captcha: ''
+})
+
+const inputCheck = () => {
+    login.account = login.account.replace(/[^\d]/g, '')
+    login.captcha = login.captcha.replace(/[^\d]/g, '')
+}
+
+const sendCaptcha = () => {
+    axios.post('/api/captcha', login, { headers: { 'Content-Type': 'application/json' } }).then(res => {
+        console.log(res)
+        login.captcha = res.data
+    }).catch(err => {
+        console.log(err)
+    })
+}
+
+const loginIn = () => {
+    axios.post('/api/login', login, { headers: { 'Content-Type': 'application/json' } }).then(res => {
+        console.log(res)
+        if (res.data === 200) {
+            sessionStorage.setItem('user', login.account)
+            router.push('/')
+        }
+    }).catch(err => {
+        console.log(err)
+    })
+}
+
+</script>

src/layout/Index.vue

@@ -4,7 +4,7 @@
             <div class="title"><a href="">局长信箱即接即办管理端</a></div>
         </div>
         <div>
-            <el-button type="primary">退出</el-button>
+            <el-button type="primary" @click="router.push('/login')">退出</el-button>
         </div>
     </header>
     <div class="flex">

src/router/index.js

@@ -34,6 +34,10 @@ const constantRoutes = [
             }
         ]
     },
+    {
+        path: '/login',
+        component: () => import('@/components/LoginView.vue')
+    },
     {
         path: '/:catchAll(.*)',
         component: NotFound,
@@ -48,4 +52,12 @@ const router = createRouter({
     routes: constantRoutes
 });
 
+router.beforeEach((to, from, next) => {
+    const user = sessionStorage.getItem("user");
+    if (!user && to.path !== '/login') {
+        next('/login');
+    } else {
+        next();
+    }
+});
 export default router;