From e09c056124b8007a067fe228096ce804828eb333 Mon Sep 17 00:00:00 2001
From: carolsi <qin.si@daocloud.io>
Date: Fri, 8 Dec 2023 15:03:16 +0800
Subject: [PATCH] feat: add login\logout

---
 src/App.vue                     | 15 ++-------
 src/components/AnakinHeader.vue | 51 +++++++++++++++++++----------
 src/main.ts                     |  7 +---
 src/plugins/axios/index.ts      | 17 +++++++++-
 src/router/guards/index.ts      | 14 ++++++++
 src/router/index.ts             | 11 ++++++-
 src/stores/user.ts              | 41 ++++++++++++++++++++++++
 src/utils/constant.ts           |  2 +-
 src/views/RouterContent.vue     | 22 +++++++++++--
 src/views/login/Login.vue       | 57 +++++++++++++++++++++++++++++++++
 10 files changed, 196 insertions(+), 41 deletions(-)
 create mode 100644 src/router/guards/index.ts
 create mode 100644 src/stores/user.ts
 create mode 100644 src/views/login/Login.vue

diff --git a/src/App.vue b/src/App.vue
index d2c15e4..a14d0c3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,16 +1,5 @@
 <template>
-  <anakin-header />
-
-  <div id="container">
-    <anakin-nav class="console-sidebar" />
-    <router-view class="console-content" />
-
-    <dialog-wrapper />
+  <div>
+    <router-view />
   </div>
 </template>
-
-<script lang="ts" setup>
-import AnakinNav from '@/components/AnakinNav.vue';
-import AnakinHeader from '@/components/AnakinHeader.vue';
-import { DialogWrapper } from '@dao-style/extend';
-</script>
diff --git a/src/components/AnakinHeader.vue b/src/components/AnakinHeader.vue
index 7b2e83f..758641c 100644
--- a/src/components/AnakinHeader.vue
+++ b/src/components/AnakinHeader.vue
@@ -1,28 +1,37 @@
 <script setup lang="ts">
 
-import { noop } from '@vueuse/core';
+// import { noop } from '@vueuse/core';
 import { i18n } from '@/plugins';
 import AnakinHeaderButton from '@/components/AnakinHeaderButton.vue';
 import Avatar from '@/assets/avatar.webp';
 import { useNamespaceStore } from '@/stores/namespace';
+import { useUserStore } from '@/stores/user';
+
+const userStore = useUserStore();
+const router = useRouter();
+
+const logout = async () => {
+  await userStore.logout();
+  router.push('/');
+};
 
 const userOperation = computed(() => [
-  {
-    label: i18n.t('components.AnakinHeader.user.personal-center'),
-    icon: 'icon-user',
-    href: './profile',
-    operate: noop,
-  },
-  {
-    label: i18n.t('components.AnakinHeader.user.setting'),
-    icon: 'icon-setting',
-    href: './settings',
-    operate: noop,
-  },
+  // {
+  //   label: i18n.t('components.AnakinHeader.user.personal-center'),
+  //   icon: 'icon-user',
+  //   href: './profile',
+  //   operate: noop,
+  // },
+  // {
+  //   label: i18n.t('components.AnakinHeader.user.setting'),
+  //   icon: 'icon-setting',
+  //   href: './settings',
+  //   operate: noop,
+  // },
   {
     label: i18n.t('components.AnakinHeader.user.logout'),
     icon: 'icon-logout',
-    operate: noop,
+    operate: logout,
   },
 ]);
 
@@ -66,7 +75,6 @@ const namespace = computed({
     <div class="datatunerx-toolbox">
       <div class="datatunerx-toolbox-item">
         <dao-dropdown
-          v-if="false"
           trigger="click"
           :offset="5"
         >
@@ -90,13 +98,22 @@ const namespace = computed({
                 :key="operate.label"
                 @click="operate.operate"
               >
-                <dao-history-link
+                <dao-button
+                  size="sm"
+                  use-font
+                  :icon-left="operate.icon"
+                  type="ghost"
+                  @click="operate.operate"
+                >
+                  {{ operate.label }}
+                </dao-button>
+                <!-- <dao-history-link
                   :href="operate.href"
                   :icon="operate.icon"
                   class="datatunerx-user-drop--item"
                 >
                   {{ operate.label }}
-                </dao-history-link>
+                </dao-history-link> -->
               </dao-dropdown-item>
             </dao-dropdown-menu>
           </template>
diff --git a/src/main.ts b/src/main.ts
index 3365fa1..197f372 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,7 +4,6 @@ import pluginInstall, { loadDayjsLanguageAsync, loadLanguageAsync } from './plug
 import '@/assets/styles/common.scss';
 
 import AppElement from './App.vue';
-import { useNamespaceStore } from './stores/namespace';
 
 const app = createApp(AppElement);
 
@@ -13,8 +12,4 @@ app.use(pluginInstall);
 await loadLanguageAsync('');
 await loadDayjsLanguageAsync('');
 
-const namespaceStore = useNamespaceStore();
-
-namespaceStore.fetchNamespace().then(() => {
-  app.mount('#app');
-});
+app.mount('#app');
diff --git a/src/plugins/axios/index.ts b/src/plugins/axios/index.ts
index 7572082..fcc46a5 100644
--- a/src/plugins/axios/index.ts
+++ b/src/plugins/axios/index.ts
@@ -1,4 +1,5 @@
 import axios from 'axios';
+import { TOKEN } from '@/utils/constant';
 
 export interface KubernetesError {
   kind: string
@@ -17,9 +18,23 @@ export {
 
 const httpClient = axios.create({
   baseURL: '/',
-  headers: { Authorization: `Bearer ${process.env.VUE_APP_AUTH}` },
+  // headers: { Authorization: `Bearer ${process.env.VUE_APP_AUTH}` },
 });
 
+httpClient.interceptors.request.use(
+  (config) => {
+    const token:string|null = localStorage.getItem(TOKEN);
+
+    if (!config.headers.Authorization && token) {
+      // eslint-disable-next-line no-param-reassign
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+
+    return config;
+  },
+  (error) => Promise.reject(error.response?.data),
+);
+
 httpClient.interceptors.response.use(
   (response) => response,
   (error) => Promise.reject(error.response?.data),
diff --git a/src/router/guards/index.ts b/src/router/guards/index.ts
new file mode 100644
index 0000000..3ee42b9
--- /dev/null
+++ b/src/router/guards/index.ts
@@ -0,0 +1,14 @@
+import { type Router } from 'vue-router';
+import { TOKEN } from '@/utils/constant';
+
+export default function ensureHooks(router: Router) {
+  router.beforeEach((to, from, next) => {
+    const token:string|null = localStorage.getItem(TOKEN);
+
+    if (!token && to.path !== '/login') {
+      next('/login');
+    } else {
+      next();
+    }
+  });
+}
diff --git a/src/router/index.ts b/src/router/index.ts
index f10d78c..2c422ea 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -2,6 +2,9 @@ import { App } from 'vue';
 import {
   createRouter, type RouteRecordRaw, type RouterHistory, type Router, createWebHistory,
 } from 'vue-router';
+import Guards from '@/router/guards/index';
+
+import Login from '@/views/login/Login.vue';
 
 import RouterContent from '@/views/RouterContent.vue';
 
@@ -24,9 +27,14 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/',
     redirect: {
-      name: 'FinetuneExperimentList',
+      name: 'Login',
     },
     children: [
+      {
+        path: 'login',
+        name: 'Login',
+        component: Login,
+      },
       {
         path: 'fine-tune',
         component: RouterContent,
@@ -123,4 +131,5 @@ export default (app: App) => {
     routes,
   });
   app.use(router);
+  Guards(router);
 };
diff --git a/src/stores/user.ts b/src/stores/user.ts
new file mode 100644
index 0000000..6e72fd0
--- /dev/null
+++ b/src/stores/user.ts
@@ -0,0 +1,41 @@
+import { defineStore } from 'pinia';
+import { TOKEN } from '@/utils/constant';
+import { useNamespaceStore } from '@/stores/namespace';
+import { i18n } from '@/plugins/vue-i18n';
+import { nError } from '@/utils/useNoty';
+import isEmpty from 'lodash/isEmpty';
+
+export const useUserStore = defineStore('user', {
+  state: () => ({
+    token: localStorage.getItem(TOKEN) as string,
+  }),
+  actions: {
+    setToken(val: string) {
+      localStorage.setItem(TOKEN, val);
+      this.token = val;
+    },
+
+    isLoginSuccess() {
+      return !isEmpty(this.token);
+    },
+
+    async initView() {
+      const namespaceStore = useNamespaceStore();
+
+      try {
+        await namespaceStore.fetchNamespace();
+      } catch (error) {
+        nError(i18n.t('common.fetchFailed'), error);
+      }
+    },
+
+    async login(val: string) {
+      this.setToken(val);
+    },
+
+    async logout() {
+      localStorage.removeItem(TOKEN);
+    },
+
+  },
+});
diff --git a/src/utils/constant.ts b/src/utils/constant.ts
index 865711c..969dde7 100644
--- a/src/utils/constant.ts
+++ b/src/utils/constant.ts
@@ -1,4 +1,4 @@
-export const TOKEN = 'ANAKIN_TOKEN';
+export const TOKEN = 'ACCESS_TOKEN';
 export const REFRESH_TOKEN = 'ANAKIN_REFRESH_TOKEN';
 export const USERNAME = 'ANAKIN_USERNAME';
 export const FAVICON = 'ANAKIN_FAVICON';
diff --git a/src/views/RouterContent.vue b/src/views/RouterContent.vue
index 6c71efd..cc08a8b 100644
--- a/src/views/RouterContent.vue
+++ b/src/views/RouterContent.vue
@@ -1,5 +1,23 @@
 <template>
-  <router-view />
+  <anakin-header />
+
+  <div id="container">
+    <anakin-nav class="console-sidebar" />
+    <router-view class="console-content" />
+
+    <dialog-wrapper />
+  </div>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import AnakinNav from '@/components/AnakinNav.vue';
+import AnakinHeader from '@/components/AnakinHeader.vue';
+import { DialogWrapper } from '@dao-style/extend';
+import { useUserStore } from '@/stores/user';
+
+const userStore = useUserStore();
+
+onBeforeMount(async () => {
+  await userStore.initView();
+});
+</script>
diff --git a/src/views/login/Login.vue b/src/views/login/Login.vue
new file mode 100644
index 0000000..aaef80b
--- /dev/null
+++ b/src/views/login/Login.vue
@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+
+import { useUserStore } from '@/stores/user';
+
+const router = useRouter();
+const token = ref<string>('');
+
+const userStore = useUserStore();
+const loginSuccess = computed(() => userStore.isLoginSuccess());
+
+const onSubmit = async () => {
+  await userStore.login(token.value);
+  router.push({
+    name: 'FinetuneExperimentList',
+  });
+};
+
+onMounted(async () => {
+  if (loginSuccess.value) {
+    router.push({
+      name: 'FinetuneExperimentList',
+    });
+  }
+});
+
+</script>
+
+<template>
+  <div class="login-container">
+    <dao-form label-width="60px">
+      <dao-form-item
+        label="Token"
+      >
+        <dao-input v-model="token" />
+      </dao-form-item>
+      <dao-form-item>
+        <dao-button
+          type="primary"
+          @click="onSubmit"
+        >
+          登录
+        </dao-button>
+      </dao-form-item>
+    </dao-form>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.login-container {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+</style>