From 790163fbc0ce65b33156c459940ca160c312d927 Mon Sep 17 00:00:00 2001
From: liuyx <1517482303@qq.com>
Date: Thu, 17 Nov 2022 10:42:24 +0800
Subject: [PATCH] =?UTF-8?q?=E7=AE=80=E5=8D=95=E5=AE=9E=E7=8E=B0=E7=99=BB?=
 =?UTF-8?q?=E5=BD=95=E9=80=80=E5=87=BA=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 admin/src/assets/scss/index.scss              |  1 +
 admin/src/assets/scss/mine.scss               |  3 ++
 admin/src/layout/header/components/Avatar.vue |  4 +++
 .../layout/header/components/Hamburger.vue    |  1 -
 admin/src/layout/header/index.vue             |  2 +-
 admin/src/layout/index.vue                    | 14 +++++++-
 admin/src/router/index.js                     | 10 ++++++
 admin/src/store/index.js                      |  3 +-
 admin/src/views/login/Login.vue               | 36 +++++++++++++++++--
 9 files changed, 68 insertions(+), 6 deletions(-)
 create mode 100644 admin/src/assets/scss/mine.scss

diff --git a/admin/src/assets/scss/index.scss b/admin/src/assets/scss/index.scss
index 68b5041..a0dcba1 100644
--- a/admin/src/assets/scss/index.scss
+++ b/admin/src/assets/scss/index.scss
@@ -1,4 +1,5 @@
 @import './element.scss';
+@import './mine.scss';
 
 * {
   margin: 0;
diff --git a/admin/src/assets/scss/mine.scss b/admin/src/assets/scss/mine.scss
new file mode 100644
index 0000000..88a7f94
--- /dev/null
+++ b/admin/src/assets/scss/mine.scss
@@ -0,0 +1,3 @@
+.m-content {
+  padding: 10px;
+}
\ No newline at end of file
diff --git a/admin/src/layout/header/components/Avatar.vue b/admin/src/layout/header/components/Avatar.vue
index dcd02bf..a2ca988 100644
--- a/admin/src/layout/header/components/Avatar.vue
+++ b/admin/src/layout/header/components/Avatar.vue
@@ -13,10 +13,14 @@
 
 <script setup>
 import { ref } from 'vue'
+import { useRouter } from 'vue-router'
 
+const router = useRouter()
 const circleUrl = ref('https://liuyxcc.github.io/img/avatar.png')
 
 const logout = () => {
+  localStorage.clear()
+  router.replace('/login')
   console.log('logout')
 }
 </script>
diff --git a/admin/src/layout/header/components/Hamburger.vue b/admin/src/layout/header/components/Hamburger.vue
index e8236a9..8997b1e 100644
--- a/admin/src/layout/header/components/Hamburger.vue
+++ b/admin/src/layout/header/components/Hamburger.vue
@@ -24,6 +24,5 @@ const toggleCollapse = () => {
 <style lang="scss" scoped>
 .hamburger-container {
   cursor: pointer;
-  margin-left: 10px;
 }
 </style>
diff --git a/admin/src/layout/header/index.vue b/admin/src/layout/header/index.vue
index 9a52cd5..d1b9792 100644
--- a/admin/src/layout/header/index.vue
+++ b/admin/src/layout/header/index.vue
@@ -19,7 +19,7 @@ import Screenfull from './components/Screenfull.vue'
 
 <style lang="scss" scoped>
 .header-container {
-  padding: 0;
+  padding: 0 10px;
   width: 100%;
   height: 100%;
   box-shadow: 0 2px 3px #888888;
diff --git a/admin/src/layout/index.vue b/admin/src/layout/index.vue
index 9b2b765..e021c08 100644
--- a/admin/src/layout/index.vue
+++ b/admin/src/layout/index.vue
@@ -6,7 +6,9 @@
     <el-container class="main-container" :class="{ hidderContainer: store.collapse }">
       <el-header><Header /></el-header>
       <el-main>
-        <router-view></router-view>
+        <transition name="fade" mode="out-in">
+          <router-view class="m-content"></router-view>
+        </transition>
       </el-main>
     </el-container>
   </el-container>
@@ -44,4 +46,14 @@ const store = useStore()
   height: 85px;
   padding: 0;
 }
+
+// 路由切换时的动画
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
 </style>
diff --git a/admin/src/router/index.js b/admin/src/router/index.js
index a2a52f7..80a816b 100644
--- a/admin/src/router/index.js
+++ b/admin/src/router/index.js
@@ -52,4 +52,14 @@ const router = createRouter({
   routes
 })
 
+// 未登录时跳转至登录界面
+router.beforeEach((to, from, next) => {
+  const token = localStorage.getItem('token')
+  if (token || to.path === '/login') {
+    next()
+  } else {
+    next('/login')
+  }
+})
+
 export default router
diff --git a/admin/src/store/index.js b/admin/src/store/index.js
index 8f6e16f..2579337 100644
--- a/admin/src/store/index.js
+++ b/admin/src/store/index.js
@@ -2,7 +2,8 @@ import { defineStore } from 'pinia'
 
 export const useStore = defineStore('store', {
   state: () => ({
-    collapse: false
+    collapse: false,
+    token: localStorage.getItem('token') || ''
   }),
   actions: {
     changeCollapse() {
diff --git a/admin/src/views/login/Login.vue b/admin/src/views/login/Login.vue
index 090c6e2..48952c0 100644
--- a/admin/src/views/login/Login.vue
+++ b/admin/src/views/login/Login.vue
@@ -36,12 +36,44 @@
 
 <script setup>
 import { ref } from 'vue'
+import { useRouter } from 'vue-router'
 
+const router = useRouter()
 const formRef = ref()
 const loginForm = ref({
-  username: '',
-  password: ''
+  username: 'admin',
+  password: 'admin'
 })
+const rules = ref({
+  username: [
+    {
+      required: true,
+      message: '请输入用户名！',
+      trigger: 'blur'
+    }
+  ],
+  password: [
+    {
+      required: true,
+      message: '请输入密码！',
+      trigger: 'blur'
+    }
+  ]
+})
+
+const submitForm = (formRef) => {
+  formRef.validate((valid) => {
+    if (valid) {
+      // 如果表单校验成功并且用户名和密码正确，则将token存储起来，并跳转至首页
+      if (loginForm.value.username === 'admin' && loginForm.value.password === 'admin') {
+        localStorage.setItem('token', 'i have token!')
+        router.replace('/')
+      }
+    } else {
+      console.log('error')
+    }
+  })
+}
 </script>
 
 <style lang="scss" scoped>