feat: logout

idoknow · May 2, 2024 · d828927 · d828927
1 parent eccab55
commit d828927
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 6 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -14,10 +14,12 @@
     "js-cookie": "^3.0.5",
     "roboto-fontface": "*",
     "vue": "^3.4.0",
+    "vue-cookies": "^1.8.4",
     "vuetify": "^3.5.0",
     "vuex": "^4.1.0"
   },
   "devDependencies": {
+    "@types/js-cookie": "^3.0.6",
     "@vitejs/plugin-vue": "^5.0.4",
     "eslint": "^8.57.0",
     "eslint-config-standard": "^17.1.0",

diff --git a/frontend/src/main.js b/frontend/src/main.js
@@ -15,22 +15,26 @@ import { createApp } from 'vue'
 
 import axios from 'axios'
 import store from './store/index.js'
+import VueCookies from 'vue-cookies'
+
 
 const app = createApp(App)
 app.use(store)
-
-const axiosInstance = axios.create({
-    withCredentials: true,
-    baseURL: store.state.base_url,
-})
-app.config.globalProperties.$axios = { ...axiosInstance }
+app.use(VueCookies)
 
 // let config=require("../config.json");
 fetch('/config.json').then(response => response.json()).then(config => {
     console.log(config)
     store.commit('setBaseURL', config.base_url)
+}).then(() => {
+    const axiosInstance = axios.create({
+        withCredentials: true,
+        baseURL: store.state.base_url,
+    })
+    app.config.globalProperties.$axios = { ...axiosInstance }
 })
 
+
 registerPlugins(app)
 
 app.mount('#app')

diff --git a/frontend/src/pages/service.vue b/frontend/src/pages/service.vue
@@ -70,6 +70,32 @@
           </template>
         </v-dialog>
 
+        <v-dialog max-width="500">
+          <template v-slot:activator="{ props: activatorProps }">
+            <div class="rect1" style="background-color: #2196F3;" v-bind="activatorProps">
+              <div>
+                <p style="font-weight: bold; font-size: 16px">退出登录</p>
+              </div>
+              <a style="font-size: 16px; cursor:pointer; font-weight: bold;">></a>
+            </div>
+          </template>
+
+          <template v-slot:default="{ isActive }">
+            <v-card title="提示">
+
+              <v-card-text>
+                真的要退出吗？
+              </v-card-text>
+
+              <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn text="取消" @click="isActive.value = false"></v-btn>
+                <v-btn text="确认" @click="isActive.value = false; logout()"></v-btn>
+              </v-card-actions>
+            </v-card>
+          </template>
+        </v-dialog>
+
         <h2 style="margin-top: 16px">🤩 推荐网站</h2>
         <div class="rect1" v-for="(service, index) in services" :style="service.color">
           <div>
@@ -106,6 +132,7 @@
 
 <script>
 import BottomNavBar from '@/components/BottomNavBar.vue'
+
 export default {
   components: {
     BottomNavBar
@@ -135,6 +162,11 @@ export default {
   },
 
   methods: {
+    logout() {
+      this.$cookies.remove('access-token')
+      window.location.reload()
+    },
+
     tokenLogin() {
       this.$axios.get('/v1/account/token-check')
         .then(res => {