set token by module

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

@@ -343,7 +343,7 @@
                 </div>
 
                 <div class="">
-                  <a routerLink="/mylearn/mylearn-pdpa-manage"
+                  <a (click)="goToMyLearn()"
                     class="p-4 items-center related-app block text-center rounded-sm hover:bg-gray-50 dark:hover:bg-black/20">
                     <img src="./assets/images/logoallHR/mylearn-logo.png" alt="miscrosoft"
                       class="leading-[1.75] text-2xl !h-[1.75rem] align-middle flex justify-center mx-auto">
@@ -353,7 +353,7 @@
                 </div>
 
                 <div class="">
-                  <a routerLink="/myjob/pdpa-manage"
+                  <a (click)="goToMyJob()"
                     class="p-4 items-center related-app block text-center rounded-sm hover:bg-gray-50 dark:hover:bg-black/20">
                     <img src="./assets/images/logoallHR/logo_myjob.png" alt="miscrosoft"
                       class="leading-[1.75] text-2xl !h-[1.75rem] align-middle flex justify-center mx-auto">
@@ -363,7 +363,7 @@
                 </div>
 
                 <div class="">
-                  <a routerLink="/myskill-x/portal-category-list"
+                  <a (click)="goToMySkillX()"
                     class="p-4 items-center related-app block text-center rounded-sm hover:bg-gray-50 dark:hover:bg-black/20">
                     <img src="./assets/images/logoallHR/mySkill-x.png" alt="miscrosoft"
                       class="leading-[1.75] text-2xl !h-[1.75rem] align-middle flex justify-center mx-auto">
@@ -408,8 +408,8 @@
               alt="Image Description"> -->
           </button>
           <div class="md:block hidden dropdown-profile">
-            <p class="font-semibold mb-0 leading-none text-[#536485] text-[0.813rem] ">{{userModel.firstName+" "+userModel.lastName}}</p>
-            <span class="opacity-[0.7] font-normal text-[#536485] block text-[0.6875rem] ">{{userModel.getRole()}}</span>
+            <p class="font-semibold mb-0 leading-none text-[#536485] text-[0.813rem] ">{{userProfile.firstName+" "+userProfile.lastName}}</p>
+            <span class="opacity-[0.7] font-normal text-[#536485] block text-[0.6875rem] ">{{userProfile.getRole()}}</span>
           </div>
           <div
             class="hs-dropdown-menu ti-dropdown-menu !-mt-3 border-0 w-[11rem] !p-0 border-defaultborder hidden main-header-dropdown  pt-0 overflow-hidden header-profile-dropdown dropdown-menu-end"

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

-import { Component, ElementRef, Renderer2 } from '@angular/core';
+import { Component, ElementRef, Renderer2, OnInit } from '@angular/core';
 import { Menu, NavService } from '../../services/nav.service';
 import { TokenService } from '../../services/token.service';
 import { TranslateService } from '@ngx-translate/core';
 import { UserModel } from '../../user-auth.model';
 import { UserProfileModel } from '../../../DPU/models/user.model';
+import { environment } from '../../../../environments/environment';
+import { Router } from '@angular/router';
 interface Item {
   id: number;
   name: string;
@@ -17,9 +19,10 @@ interface Item {
   styleUrls: ['./header.component.scss']
 })
 
-export class HeaderComponent {
-  userModel : UserProfileModel = new UserProfileModel(this.tokenService.getUser(),this.translate)
-  adminRole = true
+export class HeaderComponent implements OnInit {
+  userModel: UserModel;
+  userProfile: UserProfileModel;
+  adminRole = true;
   cartItemCount: number = 5;
   notificationCount: number = 5;
   public isCollapsed = true;
@@ -27,7 +30,8 @@ export class HeaderComponent {
   constructor(public navServices: NavService,
     private elementRef: ElementRef, private renderer: Renderer2,
     private tokenService: TokenService,
-    private translate: TranslateService) {
+    private translate: TranslateService,
+    private router: Router) {
 
     this.translate.use(
       sessionStorage.getItem("Lang") != null
@@ -144,6 +148,8 @@ export class HeaderComponent {
   public text!: string;
   public SearchResultEmpty: boolean = false;
   ngOnInit() {
+    this.userModel = this.tokenService.getUser();
+    this.userProfile = new UserProfileModel(this.userModel, this.translate);
     this.adminRole = true
     console.log("Admin",this.adminRole)
     this.navServices.items.subscribe((menuItems) => {
@@ -151,6 +157,21 @@ export class HeaderComponent {
     });
   }
 
+  goToMySkillX(){
+    this.tokenService.saveToken(`${environment.portalFixedToken}`);
+    this.router.navigate(['/myskill-x/portal-category-list']);
+  }
+
+  goToMyJob(){
+    this.tokenService.saveToken(this.userModel.accessToken);
+    this.router.navigate(['/myjob/pdpa-manage']);
+  }
+
+  goToMyLearn(){
+    this.tokenService.saveToken(this.userModel.accessToken);
+    this.router.navigate(['/mylearn/mylearn-pdpa-manage']);
+  }
+
   Search(searchText: string) {
     if (!searchText) return this.menuItems = [];
     // items array which stores the elements