Merge pull request #43 from samuikaze/dev

Merge into main branch
samuikaze · Sep 19, 2023 · d66c452 · d66c452
2 parents d0e2f47 + bbe6acb
commit d66c452
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 31 deletions.
diff --git a/src/app/abstracts/single-sign-on.d.ts b/src/app/abstracts/single-sign-on.d.ts
@@ -19,7 +19,7 @@ export declare interface SignInResponse {
 }
 
 export declare interface Token {
-  type: string;
+  tokenType: string;
   token: string;
 }
 
@@ -87,3 +87,9 @@ export declare interface UpdateUserResponse {
   username: string;
   emailVerifiedAt?: Date;
 }
+
+export declare interface SystemAccessTokenRequest {
+  system: string;
+  accessToken: string;
+  refreshToken: string;
+}
diff --git a/src/app/components/navigator/navigator.component.html b/src/app/components/navigator/navigator.component.html
@@ -36,8 +36,15 @@
               </li>
               <li><a class="dropdown-item">確認訂單</a></li>
               <li (click)="operationModal('userSettings', 'open')"><a class="dropdown-item">使用者設定</a></li>
-              <li *ngIf="showAdministratorMenu()"><a class="dropdown-item" [href]="adminPanelUri"
-                  target="_blank">後臺管理</a></li>
+              <li *ngIf="showAdministratorMenu()">
+                <a
+                  class="dropdown-item"
+                  (click)="navigateToBackStage()"
+                  target="_blank"
+                >
+                  後臺管理
+                </a>
+              </li>
               <li (click)="operationModal('signOutModal', 'open')"><a class="dropdown-item">登出</a></li>
             </ul>
           </div>
@@ -251,14 +258,28 @@ <h1 class="modal-title fs-5" id="signOutModalLabel">系統確認</h1>
             <button class="btn btn-outline-secondary disabled" type="button" id="button-addon2">驗證電子郵件地址</button>
           </div>
           <div id="email-verified" class="form-text" [class]="{'text-success': isEmailVerified()}">
-            <svg *ngIf="isEmailVerified()" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
-              class="bi bi-check-circle" viewBox="0 0 16 16">
+            <svg
+              *ngIf="isEmailVerified()"
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              fill="currentColor"
+              class="bi bi-check-circle"
+              viewBox="0 0 16 16"
+            >
               <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
               <path
                 d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z" />
             </svg>
-            <svg *ngIf="!isEmailVerified()" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
-              fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
+            <svg
+              *ngIf="!isEmailVerified()"
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              fill="currentColor"
+              class="bi bi-x-circle-fill"
+              viewBox="0 0 16 16"
+            >
               <path
                 d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z" />
             </svg>

diff --git a/src/app/components/navigator/navigator.component.ts b/src/app/components/navigator/navigator.component.ts
@@ -8,6 +8,8 @@ import {
   SignInResponse,
   User,
   UpdateUserResponse,
+  Token,
+  SystemAccessTokenRequest,
 } from 'src/app/abstracts/single-sign-on';
 import { TokenUser } from 'src/app/abstracts/single-sign-on';
 import { BreadcrumbService } from 'src/app/services/breadcrumb-service/breadcrumb.service';
@@ -63,7 +65,6 @@ export class NavigatorComponent implements OnInit {
   public signUpError: string = '';
   private modals: Modals = {};
   private clockId?: number = undefined;
-  public adminPanelUri: string = '#';
   private selectedImage: SelectedImage = {
     dataurl: '',
     filename: '',
@@ -101,8 +102,7 @@ export class NavigatorComponent implements OnInit {
         this.getBreadcrumb();
         await this.getFileStorageServiceUrl();
         this.getLoginStatus()
-          .then(() => this.checkAuthenticateStatus())
-          .then(() => (this.getAdminPanelUri().then(response => this.adminPanelUri = response)));
+          .then(() => this.checkAuthenticateStatus());
       }
     });
   }
@@ -529,27 +529,6 @@ export class NavigatorComponent implements OnInit {
     return this.user?.roles?.map((role) => role.name).join('、');
   }
 
-  /**
-   * 取得後台管理網址
-   * @returns 後台管理網址
-   */
-  public async getAdminPanelUri(): Promise<string> {
-    const accessToken = this.secureLocalStorageService.get('accessToken');
-    const baseUri = await this.appEnvironmentService.getConfig(ApiServiceTypes.BackStage);
-
-    if (accessToken != null) {
-      const data = this.secureLocalStorageService.encrypt(accessToken);
-      const token = Buffer.from(data)
-        .toString('base64')
-        .replace(/\+/g, '-')
-        .replace(/\//g, '_');
-
-      return `${baseUri}/?token=${token}`;
-    }
-
-    return '';
-  }
-
   /**
    * 取得圖片完整網址
    * @param type 類型
@@ -759,4 +738,32 @@ export class NavigatorComponent implements OnInit {
       this.virtualAvator.nativeElement.value = null;
     }
   }
+
+  /**
+   * 跳轉到後臺頁面
+   */
+  public navigateToBackStage(): void {
+    this.appEnvironmentService.getConfig(ApiServiceTypes.SingleSignOn)
+      .then(baseUri => {
+        const uri = `${baseUri}/api/v1/system/token`;
+        const body: SystemAccessTokenRequest = {
+          system: "LSGamesFrontend - Backstage",
+          accessToken: this.secureLocalStorageService.get('accessToken') ?? '',
+          refreshToken: this.secureLocalStorageService.get('refreshToken') ?? ''
+        };
+        this.requestService.post<BaseResponse<Token>>(uri, body)
+          .subscribe({
+            next: async response => {
+              const backStageUri = await this.appEnvironmentService.getConfig(ApiServiceTypes.BackStage);
+              const base64Uri = response.data.token
+                .replace(/\+/g, '-')
+                .replace(/\//g, '_');
+              location.href = `${backStageUri}/?token=${base64Uri}`;
+            },
+            error: (errors: HttpErrorResponse) => {
+              this.requestService.requestFailedHandler(errors);
+            },
+          });
+      });
+  }
 }