From 840170b66e389b7b5f0aca3e2b1286db595a092f Mon Sep 17 00:00:00 2001
From: Amadeus <RealmeAmadeus@gmail.com>
Date: Mon, 6 May 2024 22:43:50 +0800
Subject: [PATCH] =?UTF-8?q?=E9=80=80=E5=87=BA=E7=99=BB=E5=BD=95=E4=BB=A5?=
 =?UTF-8?q?=E5=8F=8A=E8=B7=AF=E7=94=B1=E5=AE=88=E5=8D=AB=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 my-project-frontend/src/net/index.js          | 44 ++++++++++++++++++-
 my-project-frontend/src/router/index.js       | 21 ++++++++-
 my-project-frontend/src/views/IndexView.vue   | 19 ++++++++
 .../src/views/welcome/LoginPage.vue           |  9 +++-
 4 files changed, 89 insertions(+), 4 deletions(-)
 create mode 100644 my-project-frontend/src/views/IndexView.vue

diff --git a/my-project-frontend/src/net/index.js b/my-project-frontend/src/net/index.js
index 4c914ad..7a1db46 100644
--- a/my-project-frontend/src/net/index.js
+++ b/my-project-frontend/src/net/index.js
@@ -13,7 +13,7 @@ const defaultError = (err) => {
     ElMessage.warning('发生了一些错误,请联系管理员')
 }
 
-function takeAccess() {
+function takeAccessToken() {
     const  str = localStorage.getItem(authItemName) || sessionStorage.getItem(authItemName)
     if (!str) return null;
     const authObj = JSON.parse(str)
@@ -39,6 +39,20 @@ function deleteAccessToken(){
     sessionStorage.removeItem(authItemName)
 }
 
+/*
+获取请求头
+ */
+function accessHeader() {
+    const token = takeAccessToken();
+    return token ? {
+        'Authorization' : `Bearer ${takeAccessToken()}`
+    } : {
+
+    }
+}
+
+
+
 function internalPost(url , data , header , success ,failure , error = defaultError) {
     axios.post(url,data, {headers: header}).then(({data}) => {
         if (data.code ===200){
@@ -59,6 +73,17 @@ function internalGet(url , header , success ,failure , error = defaultError) {
     }) .catch(err => error(err))
 }
 
+/*
+封装get方法和post方法
+ */
+function get(url , success , failure = defaultFailure) {
+    internalGet(url , accessHeader() ,success , failure)
+}
+
+function post(url , data , success , failure = defaultFailure){
+    internalPost(url , data , accessHeader() ,success ,failure)
+}
+
 function login(username , password , remember , success , failure = defaultFailure) {
     internalPost('api/auth/login', {
         username: username ,
@@ -72,4 +97,19 @@ function login(username , password , remember , success , failure = defaultFailu
 
     }, failure)
 }
-export {login}
\ No newline at end of file
+
+/*
+退出函数
+ */
+function logout(success ,failure = defaultFailure){
+    get('/api/auth/logout' , () => {
+        deleteAccessToken()
+        ElMessage.success('退出登录成功,欢迎您再次使用')
+        success()
+    } , failure)
+}
+
+function unauthorized(){
+    return !takeAccessToken()
+}
+export {login , logout , get ,post , unauthorized}
\ No newline at end of file
diff --git a/my-project-frontend/src/router/index.js b/my-project-frontend/src/router/index.js
index d3ee466..649541b 100644
--- a/my-project-frontend/src/router/index.js
+++ b/my-project-frontend/src/router/index.js
@@ -1,4 +1,5 @@
 import {createRouter , createWebHistory} from "vue-router";
+import {unauthorized} from "@/net";
 
 const  router  = createRouter( {
     history: createWebHistory(import.meta.env.BASE_URL),
@@ -9,14 +10,32 @@ const  router  = createRouter( {
             component:() => import('@/views/WelcomeView.vue'),
             children: [
                 {
-                    //什么都不配置的情况
+
                     path: '',
                     name: 'welcome-login',
                     component: () => import('@/views/welcome/LoginPage.vue')
                 }
                 ]
+        }, {
+        /*
+        添加路由
+         */
+            path: '/index',
+            name: 'index',
+            component: () => import('@/views/IndexView.vue')
         }
     ]
 })
 
+router.beforeEach((to, from  , next) =>{
+    const isUnauthorized = unauthorized()
+    if (to.name.startsWith('welcome-') && !isUnauthorized){
+        next('index')
+    }else if (to.fullPath.startsWith('/index') && isUnauthorized) {
+        next('/')
+    }else {
+        next()
+    }
+})
+
 export default router
\ No newline at end of file
diff --git a/my-project-frontend/src/views/IndexView.vue b/my-project-frontend/src/views/IndexView.vue
new file mode 100644
index 0000000..84a41b8
--- /dev/null
+++ b/my-project-frontend/src/views/IndexView.vue
@@ -0,0 +1,19 @@
+<script setup>
+import {logout} from "@/net";
+import router from "@/router";
+
+function userLogout(){
+  logout(()=> router.push('/'))
+}
+</script>
+
+<template>
+  <div>
+    <el-button @click="userLogout">退出登录</el-button>
+  </div>
+
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/my-project-frontend/src/views/welcome/LoginPage.vue b/my-project-frontend/src/views/welcome/LoginPage.vue
index 17683eb..379beff 100644
--- a/my-project-frontend/src/views/welcome/LoginPage.vue
+++ b/my-project-frontend/src/views/welcome/LoginPage.vue
@@ -2,6 +2,10 @@
 import { User , Lock} from '@element-plus/icons-vue'
 import {reactive, ref} from "vue";
 import {login} from "@/net";
+/*
+导入路由
+ */
+import router from "@/router";
 
 const formRef = ref()
 
@@ -24,7 +28,10 @@ function userLogin(){
   formRef.value.validate((valid) => {
     if (valid){
       login(form.username , form.password ,form.remember  , ()=>{
-
+        /*
+        路由到index
+         */
+        router.push('/index')
       })
     }
   })