***** npm i เพิ่ม jwtDecode

package-lock.json

@@ -93,6 +93,7 @@
         "eslint": "^8.43.0",
         "gulp-postcss": "^9.0.1",
         "jasmine-core": "~5.0.1",
+        "jwt-decode": "^4.0.0",
         "karma": "~6.4.2",
         "karma-chrome-launcher": "~3.2.0",
         "karma-coverage": "~2.2.1",
@@ -12870,6 +12871,15 @@
         "node >= 0.2.0"
       ]
     },
+    "node_modules/jwt-decode": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz",
+      "integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==",
+      "dev": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/karma": {
       "version": "6.4.2",
       "resolved": "https://registry.npmjs.org/karma/-/karma-6.4.2.tgz",

package.json

@@ -106,6 +106,7 @@
     "postcss": "^8.4.24",
     "tailwind-clip-path": "^1.0.0",
     "tailwindcss": "^3.3.2",
-    "typescript": "~5.1.3"
+    "typescript": "~5.1.3",
+    "jwt-decode": "^4.0.0"
   }
 }

src/app/components/dashboard/dashboard.module.ts

@@ -164,6 +164,7 @@ import { RolePermissionConfigComponent } from '../company-components/account-set
 import { ConfigPermissionService } from 'src/app/shared/services/config-permission.service';
 import { TimeAttendanceManageComponent } from '../performance-management-evaluation/time-attendance/time-attendance-manage/time-attendance-manage.component';
 import { TimeAttendanceStatisticsComponent } from '../performance-management-evaluation/time-attendance/time-attendance-statistics/time-attendance-statistics.component';
+import { TokenService } from 'src/app/shared/services/token.service';
 
 
 export const MY_DATE_FORMATS = {
@@ -359,6 +360,7 @@ export class CustomDateAdapter extends NativeDateAdapter {
     EvaluationIdpService,
     EmpStatusService,
     ConfigPermissionService,
+    TokenService,
     {
       provide: HTTP_INTERCEPTORS,
       useClass: HttpRequestInterceptor,

src/app/shared/components/header/header.component.html

@@ -711,10 +711,10 @@
                   </div>
                   <div>
                     <p class="ti-dropdown-header-title !text-white">
-                      Json Taylor
+                      {{tokenService.getUser().user?tokenService.getUser().user:''}}
                     </p>
-                    <p class="ti-dropdown-header-content !text-white/50">
-                      Web Designer
+                    <p class="ti-dropdown-header-content !text-white/50 " style="font-size: 12px;">
+                      {{tokenService.getUser().iss?tokenService.getUser().iss:''}}
                     </p>
                   </div>
                 </div>

src/app/shared/components/header/header.component.ts

@@ -2,6 +2,7 @@
 import { Component, ElementRef } from '@angular/core';
 import { NavService } from '../../services/navservice';
 import { AuthService } from '../../services/auth.service';
+import { TokenService } from '../../services/token.service';
 
 @Component({
   selector: 'app-header',
@@ -12,6 +13,7 @@ import { AuthService } from '../../services/auth.service';
 export class HeaderComponent {
   constructor(public navServices: NavService,
     private authService: AuthService,
+    public tokenService:TokenService,
     private elementRef: ElementRef) {
   }
 

src/app/shared/services/token.service.ts

+import { Injectable } from '@angular/core';
+import { jwtDecode } from "jwt-decode";
+
+const TOKEN_KEY = 'accessToken';
+@Injectable({
+  providedIn: 'root'
+})
+export class TokenService {
+
+  constructor() {
+  }
+  
+  public getUser(): any {
+    const user = jwtDecode(window.sessionStorage.getItem(TOKEN_KEY)!)
+    if (user) {
+      return user;
+    }
+
+    return ;
+  }
+}