Merged PR 132: 画面実装（ページヘッダ修正）

## 概要
[Task1840: 画面実装（ページヘッダ修正）](https://paruru.nds-tyo.co.jp:8443/tfs/ReciproCollection/fa4924a4-d079-4fab-9fb5-a9a11eb205f0/_workitems/edit/1840)

- JWTからアクセストークン内のロールを確認する
- 管理者権限（admin）を持たない場合はライセンスタブを表示しない

## レビューポイント
- ライセンスタブを表示しない処理を.filterで行ってるが、問題ないか

## UIの変更
- ライセンスタブの表示非表示

## 動作確認状況
- ローカルで確認、adminユーザで表示されること
![image.png](https://dev.azure.com/ODMSCloud/6023ff7b-d41c-4fa7-9c6f-f576ba48c07c/_apis/git/repositories/302da463-a2d7-40f9-b2bb-6e8edf324fa9/pullRequests/132/attachments/image.png)
standardユーザで表示されないことを確認
![image (2).png](https://dev.azure.com/ODMSCloud/6023ff7b-d41c-4fa7-9c6f-f576ba48c07c/_apis/git/repositories/302da463-a2d7-40f9-b2bb-6e8edf324fa9/pullRequests/132/attachments/image%20%282%29.png)

## 補足
- `// userRole: "user" | "partner"; ログインユーザーのロールに応じてタブの活性非活性に使用する想定`
の記述は今回使わなかったので削除しました。

dictation_client/src/components/auth/constants.ts

@@ -0,0 +1,18 @@
+/**
+ * 管理ロール
+ * @const {string[]}
+ */
+export const ADMIN_ROLES = {
+  ADMIN: "admin",
+  STANDARD: "standard",
+} as const;
+
+/**
+ * ロール
+ * @const {string[]}
+ */
+export const USER_ROLES = {
+  NONE: "none",
+  AUTHOR: "author",
+  TYPIST: "typist",
+} as const;

dictation_client/src/components/header/constants.ts

@@ -1,12 +1,24 @@
 import { HeaderMenus, LoginedPaths } from "./types";
 
+export const HEADER_MENUS_ACCOUNT = "Account";
+export const HEADER_MENUS_USER = "User";
+export const HEADER_MENUS_LICENSE = "License";
+export const HEADER_MENUS_DICTATIONS = "Dictations";
+export const HEADER_MENUS_WORKFLOW = "Workflow";
+export const HEADER_MENUS_XXX = "XXX"; // XXX 仮のタブ
+
 export const HEADER_MENUS: { label: HeaderMenus; path: LoginedPaths }[] = [
-  { label: "Account", path: "/account" },
-  { label: "Dictations", path: "/dictations" },
-  { label: "License", path: "/license" },
-  { label: "User", path: "/user" },
-  { label: "Workflow", path: "/workflow" },
-  { label: "XXX", path: "/xxx" }, // XXX 仮のタブ
+  { label: HEADER_MENUS_ACCOUNT, path: "/account" },
+  { label: HEADER_MENUS_DICTATIONS, path: "/dictations" },
+  { label: HEADER_MENUS_LICENSE, path: "/license" },
+  { label: HEADER_MENUS_USER, path: "/user" },
+  { label: HEADER_MENUS_WORKFLOW, path: "/workflow" },
+  { label: HEADER_MENUS_XXX, path: "/xxx" }, // XXX 仮のタブ
 ];
 
 export const HEADER_NAME = "ODMS Cloud";
+
+/**
+ * adminのみに表示するヘッダータブ
+ */
+export const ADMIN_ONLY_TABS = [HEADER_MENUS_LICENSE];

dictation_client/src/components/header/index.tsx

@@ -6,7 +6,6 @@ import { isLoginPaths } from "./utils";
 
 interface HeaderProps {
   userName?: string;
-  //   userRole: string; ログインユーザーのロールに応じてタブの活性非活性に使用する想定
 }
 // ヘッダー切り替え用のcomponent
 const Header: React.FC<HeaderProps> = (props) => {

dictation_client/src/components/header/loginedHeader.tsx

@@ -1,13 +1,13 @@
 import React from "react";
+import { isAdminUser } from "features/auth/utils";
 import styles from "./loginedHeader.module.scss";
 
 import logo from "../../assets/images/OMS_logo_black.svg";
 import ac from "../../assets/images/account_circle.svg";
 import { LoginedPaths } from "./types";
-import { HEADER_MENUS, HEADER_NAME } from "./constants";
+import { ADMIN_ONLY_TABS, HEADER_MENUS, HEADER_NAME } from "./constants";
 
 interface HeaderProps {
-  // userRole: "user" | "partner"; ログインユーザーのロールに応じてタブの活性非活性に使用する想定
   name: string;
   activePath: LoginedPaths;
 }
@@ -15,7 +15,10 @@ interface HeaderProps {
 // ログイン後のヘッダー
 const LoginedHeader: React.FC<HeaderProps> = (props: HeaderProps) => {
   const { name, activePath } = props;
-
+  const isAdmin = isAdminUser();
+  const filteredMenus = isAdmin
+    ? HEADER_MENUS
+    : HEADER_MENUS.filter((item) => !ADMIN_ONLY_TABS.includes(item.label));
   return (
     <header className={styles.header}>
       <div className={styles.headerLogo}>
@@ -24,7 +27,7 @@ const LoginedHeader: React.FC<HeaderProps> = (props: HeaderProps) => {
       <div className={styles.headerSub}>{HEADER_NAME}</div>
       <div className={styles.headerMenu}>
         <ul>
-          {HEADER_MENUS.map((x) => (
+          {filteredMenus.map((x) => (
             <li key={x.label}>
               <a
                 href={x.path}

dictation_client/src/features/auth/utils.ts

@@ -1,4 +1,6 @@
 import { ConfigurationParameters } from "api";
+import { decodeToken } from "../../common/decodeToken";
+import { ADMIN_ROLES } from "../../components/auth/constants";
 
 /**
  * Get access token
@@ -51,3 +53,16 @@ export const initialConfig = (): ConfigurationParameters => {
 
   return config;
 };
+
+/**
+ * is admin user ログインしているユーザがadmin権限を持つかどうかを返す
+ * @returns bool
+ */
+export const isAdminUser = (): boolean => {
+  const jwt = loadAccessToken();
+  const token = jwt ? decodeToken(jwt) : null;
+  if (!token) {
+    return false;
+  }
+  return token.role.includes(ADMIN_ROLES.ADMIN);
+};