[UPDATE] 使用 async/await 语法进行重构

Signed-off-by: Alan Yeh <[email protected]>

central-studio-views/central-identity-view/src/main/node/src/App.vue

@@ -1,25 +1,23 @@
 <script setup lang="ts">
-import { RouterLink, RouterView } from 'vue-router'
-import axios from 'axios'
+import { RouterView } from 'vue-router'
 import { onMounted } from 'vue'
 import router from '@/router'
-import { useAccountStore } from '@/stores/account'
+import { useSessionStore } from '@/stores/session'
 
-onMounted(() => {
+const sessionStore = useSessionStore()
+
+onMounted(async () => {
   // 显示获取数据中
-  router.push('/loading')
-
-  const accountStore = useAccountStore()
-
-  axios.get('/identity/api/account')
-    .then((response) => {
-      // 跳转到关于界面
-      accountStore.setAccount(response.data)
-      router.push('/about')
-    }).catch((error) => {
-    // 跳转到登录
-    router.push('/login')
-  })
+  await router.push('/loading')
+
+  const account = await sessionStore.getAccount()
+  if (account) {
+    // 跳转到关于界面
+    await router.push('/about')
+  } else {
+    // 跳转到登录界面
+    await router.push('/login')
+  }
 })
 
 </script>

central-studio-views/central-identity-view/src/main/node/src/api/IdentityService.ts

@@ -0,0 +1,61 @@
+import type { Account } from '@/api/data/organization/Account'
+import axios from 'axios'
+import { sha256 } from 'js-sha256'
+
+const client = axios.create({
+  validateStatus: function(status: number) {
+    return true
+  }
+})
+
+class IdentityService {
+  /**
+   * 登录
+   * @param account 帐户名
+   * @param password 密码
+   */
+  public async login(account: string, password: string): Promise<void> {
+    // 对密码进行 sha256 摘要后再提交
+    // 防止原始密码被截取
+    const hash = sha256.create()
+    hash.update(password)
+
+    const response = await client.post('/identity/api/login', {
+      account: account,
+      password: hash.hex(),
+      secret: 'lLS4p6skBbBVZX30zR5'
+    })
+
+    if (response.status !== 200) {
+      throw new Error(response.data.message)
+    }
+  }
+
+  /**
+   * 退出登录
+   */
+  public async logout(): Promise<void> {
+    return client.get('/identity/api/logout', {
+      headers: {
+        'Accept': 'application/json'
+      }
+    })
+  }
+
+  /**
+   * 获取当前已登录用户
+   */
+  public async getAccount(): Promise<Account | null> {
+    try {
+      const response = await client.get('/identity/api/account')
+      if (response.status !== 200) {
+        return null
+      }
+      return response.data
+    } catch (error) {
+      return null
+    }
+  }
+}
+
+export const identity = new IdentityService()

central-studio-views/central-identity-view/src/main/node/src/data/authority/Role.ts → central-studio-views/central-identity-view/src/main/node/src/api/data/authority/Role.ts

@@ -1,4 +1,4 @@
-import type { Account, Unit } from '@/data/organization/Organization'
+import type { Account, Unit } from '@/api/data/organization/Organization'
 
 export interface Role {
   id?: string;

central-studio-views/central-identity-view/src/main/node/src/data/organization/AccountUnit.ts → central-studio-views/central-identity-view/src/main/node/src/api/data/organization/AccountUnit.ts

@@ -1,7 +1,7 @@
-import type { Account } from '@/data/organization/Account'
-import type { Department } from '@/data/organization/Department'
-import type { Unit } from '@/data/organization/Unit'
-import type { Rank } from '@/data/organization/Rank'
+import type { Account } from '@/api/data/organization/Account'
+import type { Department } from '@/api/data/organization/Department'
+import type { Unit } from '@/api/data/organization/Unit'
+import type { Rank } from '@/api/data/organization/Rank'
 
 export interface AccountUnit {
   id?: string;

central-studio-views/central-identity-view/src/main/node/src/data/organization/Area.ts → central-studio-views/central-identity-view/src/main/node/src/api/data/organization/Area.ts

@@ -1,5 +1,5 @@
-import type { Unit } from '@/data/organization/Unit'
-import type { Account } from '@/data/organization/Account'
+import type { Unit } from '@/api/data/organization/Unit'
+import type { Account } from '@/api/data/organization/Account'
 
 export interface Area {
   id?: string;

central-studio-views/central-identity-view/src/main/node/src/data/organization/Department.ts → central-studio-views/central-identity-view/src/main/node/src/api/data/organization/Department.ts

@@ -1,5 +1,5 @@
-import type { Unit } from '@/data/organization/Unit'
-import type { Account } from '@/data/organization/Account'
+import type { Unit } from '@/api/data/organization/Unit'
+import type { Account } from '@/api/data/organization/Account'
 
 export interface Department {
   id?: string;

central-studio-views/central-identity-view/src/main/node/src/api/data/organization/Organization.ts

@@ -0,0 +1,8 @@
+import type { Account } from '@/api/data/organization/Account'
+import type { AccountUnit } from '@/api/data/organization/AccountUnit'
+import type { Area } from '@/api/data/organization/Area'
+import type { Department } from '@/api/data/organization/Department'
+import type { Rank } from '@/api/data/organization/Rank'
+import type { Unit } from '@/api/data/organization/Unit'
+
+export type { Account, AccountUnit, Area, Department, Rank, Unit }

central-studio-views/central-identity-view/src/main/node/src/data/organization/Rank.ts → central-studio-views/central-identity-view/src/main/node/src/api/data/organization/Rank.ts

@@ -1,5 +1,5 @@
-import type { Unit } from '@/data/organization/Unit'
-import type { Account } from '@/data/organization/Account'
+import type { Unit } from '@/api/data/organization/Unit'
+import type { Account } from '@/api/data/organization/Account'
 
 export interface Rank {
   id?: string;

central-studio-views/central-identity-view/src/main/node/src/data/organization/Unit.ts → central-studio-views/central-identity-view/src/main/node/src/api/data/organization/Unit.ts

@@ -1,6 +1,6 @@
-import type { Area } from '@/data/organization/Area'
-import type { Department } from '@/data/organization/Department'
-import type { Account } from '@/data/organization/Account'
+import type { Area } from '@/api/data/organization/Area'
+import type { Department } from '@/api/data/organization/Department'
+import type { Account } from '@/api/data/organization/Account'
 
 export interface Unit {
   id?: string;

central-studio-views/central-identity-view/src/main/node/src/stores/session.ts

@@ -0,0 +1,37 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+import type { Account } from '@/api/data/organization/Organization'
+import { identity } from '@/api/IdentityService'
+
+export const useSessionStore = defineStore('session', () => {
+  const account = ref<Account | null>(null)
+
+  /**
+   * 获取当前已登录的用户信息
+   * 如果当前用户未登录，将返回 null
+   */
+  async function getAccount(): Promise<Account | null> {
+    if (!account.value) {
+      account.value = await identity.getAccount()
+    }
+    return account.value
+  }
+
+  /**
+   * 登录
+   * @param account 帐户名
+   * @param password 密码
+   */
+  async function login(account: string, password: string): Promise<void> {
+    return identity.login(account, password)
+  }
+
+  /**
+   * 退出登录
+   */
+  async function logout(): Promise<void> {
+    return identity.logout()
+  }
+
+  return { getAccount, login, logout }
+})

central-studio-views/central-identity-view/src/main/node/src/views/AboutView.vue

@@ -1,17 +1,19 @@
 <script lang="ts" setup>
-import { useAccountStore } from '@/stores/account'
-import type { Account } from '@/data/organization/Organization'
+import type { Account } from '@/api/data/organization/Account'
+import { useSessionStore } from '@/stores/session'
 import { ref, onMounted } from 'vue'
 
-const account = ref<Account>({})
+const sessionStore = useSessionStore()
+const account = ref<Account | null>(null)
 
-onMounted(() => {
-  const accountStore = useAccountStore()
-  account.value = accountStore.getAccount()
+onMounted(async () => {
+  account.value = await sessionStore.getAccount()
 })
 
-const onLogout = () => {
-  window.location.href = '/identity/api/__logout'
+async function onLogout() {
+  await sessionStore.logout()
+  // 刷新当前页面
+  window.location.reload()
 }
 
 </script>
@@ -20,7 +22,7 @@ const onLogout = () => {
   <div class="about">
     <h1>Central Identity</h1>
     <p />
-    <h2>{{ account.name }}</h2>
+    <h2>{{ account?.name }}</h2>
     <el-button type="primary" @click.prevent="onLogout">Logout</el-button>
   </div>
 </template>

central-studio-views/central-identity-view/src/main/node/src/views/LoginView.vue

@@ -1,34 +1,25 @@
 <script lang="ts" setup>
 import { reactive } from 'vue'
-import axios from 'axios'
-import { sha256 } from 'js-sha256'
-
+import { useSessionStore } from '@/stores/session'
 
+const sessionStore = useSessionStore()
 
 const form = reactive({
   account: 'syssa',
-  password: 'x.123456',
-  secret: 'lLS4p6skBbBVZX30zR5' // Web 端固定密钥
+  password: 'x.123456'
 })
 
-const onSubmit = () => {
-  // 对密码进行 sha256 摘要后再提交
-  // 防止原始密码被截取
-  const hasher = sha256.create();
-  hasher.update(form.password);
+async function onSubmit() {
+  try {
+    // 登录
+    await sessionStore.login(form.account, form.password)
 
-  axios.post('/identity/api/login', {
-    account: form.account,
-    password: hasher.hex(),
-    secret: form.secret
-  }).then((response) => {
     // 登录成功后，刷新页面
     // 后台接口在接收到请求后，会根据是否存在 redirect_uri 参数自动判断重定向到指定的地址
     window.location.reload()
-  }).catch((error) => {
-    // 登录失败
-    alert(error.response.data.message)
-  })
+  } catch (error: any) {
+    alert(error.message)
+  }
 }
 </script>