[Feature][UI Next] Add login and logout function. (#7644)

* [Feature][UI Next] Add login and logout function.

* [Feature][UI Next] Remove api address.

dolphinscheduler-ui-next/package.json

@@ -12,12 +12,13 @@
   "dependencies": {
     "@vueuse/core": "^7.2.2",
     "axios": "^0.24.0",
+    "date-fns": "^2.27.0",
     "echarts": "^5.2.2",
     "lodash": "^4.17.21",
-    "date-fns": "^2.27.0",
     "naive-ui": "^2.21.5",
     "nprogress": "^0.2.0",
     "pinia": "^2.0.0-rc.10",
+    "pinia-plugin-persistedstate": "^1.0.3",
     "qs": "^6.10.2",
     "vfonts": "^0.1.0",
     "vue": "^3.2.23",

dolphinscheduler-ui-next/src/layouts/content/components/user/use-dataList.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { reactive, ref, h } from 'vue'
+import { reactive, h } from 'vue'
 import { NIcon } from 'naive-ui'
 import { UserOutlined, LogoutOutlined } from '@vicons/antd'
 

dolphinscheduler-ui-next/src/layouts/content/components/user/use-dropdown.ts

@@ -15,12 +15,30 @@
  * limitations under the License.
  */
 
+import { useRouter } from 'vue-router'
 import { DropdownOption } from 'naive-ui'
+import { logout } from '@/service/modules/logout'
+import { useUserStore } from '@/store/user/user'
+import type { Router } from 'vue-router'
 
 export function useDropDown() {
+  const router: Router = useRouter()
+  const userStore = useUserStore()
+
   const handleSelect = (key: string | number, option: DropdownOption) => {
     console.log(key, option)
+    if (key === 'logout') {
+      useLogout()
+    }
   }
+
+  const useLogout = () => {
+    logout().then(() => {
+      userStore.setSessionId('')
+      router.push({ path: 'login' })
+    })
+  }
+
   return {
     handleSelect,
   }

dolphinscheduler-ui-next/src/main.ts

@@ -19,6 +19,7 @@ import { createApp } from 'vue'
 import App from './App'
 import router from './router'
 import { createPinia } from 'pinia'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 import i18n from '@/locales'
 import * as echarts from 'echarts'
 import 'echarts/theme/macarons'
@@ -26,8 +27,13 @@ import 'echarts/theme/dark-bold'
 import './assets/styles/default.scss'
 
 const app = createApp(App)
+const pinia = createPinia()
+
+pinia.use(piniaPluginPersistedstate)
+
 app.config.globalProperties.echarts = echarts
+
 app.use(router)
-app.use(createPinia())
+app.use(pinia)
 app.use(i18n)
 app.mount('#app')

dolphinscheduler-ui-next/src/service/modules/login/index.ts

@@ -18,7 +18,7 @@
 import { axios } from '@/service/service'
 import { LoginReq } from './types'
 
-export function queryLog(data: LoginReq): any {
+export function login(data: LoginReq): any {
   return axios({
     url: '/login',
     method: 'post',

dolphinscheduler-ui-next/src/service/modules/login/types.ts

@@ -20,4 +20,8 @@ interface LoginReq {
   userPassword: string
 }
 
-export { LoginReq }
+interface SessionIdRes {
+  sessionId: string
+}
+
+export { LoginReq, SessionIdRes }

dolphinscheduler-ui-next/src/service/modules/logout/index.ts

@@ -17,7 +17,7 @@
 
 import { axios } from '@/service/service'
 
-export function signOut(): any {
+export function logout(): any {
   return axios({
     url: '/signOut',
     method: 'post',

dolphinscheduler-ui-next/src/service/service.ts

@@ -17,6 +17,9 @@
 
 import axios, { AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios'
 import qs from 'qs'
+import { useUserStore } from '@/store/user/user'
+
+const userStore = useUserStore()
 
 const baseRequestConfig: AxiosRequestConfig = {
   baseURL: import.meta.env.VITE_APP_WEB_URL + '/dolphinscheduler',
@@ -27,6 +30,9 @@ const baseRequestConfig: AxiosRequestConfig = {
   paramsSerializer: (params) => {
     return qs.stringify(params, { arrayFormat: 'repeat' })
   },
+  headers: {
+    sessionId: userStore.getSessionId,
+  },
 }
 
 const service = axios.create(baseRequestConfig)

dolphinscheduler-ui-next/src/store/user/types.ts

@@ -0,0 +1,22 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+interface UserState {
+  sessionId: string
+}
+
+export default UserState

dolphinscheduler-ui-next/src/store/user/user.ts

@@ -0,0 +1,37 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { defineStore } from 'pinia'
+import UserState from '@/store/user/types'
+
+export const useUserStore = defineStore({
+  id: 'user',
+  state: (): UserState => ({
+    sessionId: '',
+  }),
+  persist: true,
+  getters: {
+    getSessionId(): string {
+      return this.sessionId
+    },
+  },
+  actions: {
+    setSessionId(sessionId: string): void {
+      this.sessionId = sessionId
+    },
+  },
+})

dolphinscheduler-ui-next/src/views/login/use-login.ts

@@ -16,23 +16,26 @@
  */
 
 import { useRouter } from 'vue-router'
+import { login } from '@/service/modules/login'
+import { useUserStore } from '@/store/user/user'
+import { SessionIdRes } from '@/service/modules/login/types'
 import type { Router } from 'vue-router'
-import { queryLog } from '@/service/modules/login'
 
 export function useLogin(state: any) {
   const router: Router = useRouter()
+  const userStore = useUserStore()
+
   const handleLogin = () => {
     state.loginFormRef.validate((valid: any) => {
       if (!valid) {
-        queryLog({ ...state.loginForm }).then((res: Response) => {
-          console.log('res', res)
+        login({ ...state.loginForm }).then((res: SessionIdRes) => {
+          userStore.setSessionId(res.sessionId)
           router.push({ path: 'home' })
         })
-      } else {
-        console.log('Invalid')
       }
     })
   }
+
   return {
     handleLogin,
   }