简单实现登录退出功能

admin/src/assets/scss/index.scss

@@ -1,4 +1,5 @@
 @import './element.scss';
+@import './mine.scss';
 
 * {
   margin: 0;

admin/src/assets/scss/mine.scss

@@ -0,0 +1,3 @@
+.m-content {
+  padding: 10px;
+}

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>

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>

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;

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>

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

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() {

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: '',
+  username: 'admin',
-  password: ''
+  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>