My single page application in Angular 5 utilizes session storage to store various navigation parameters, flags, and information. However, these session storage values are visible and can be modified by end users through the browser's Application -> Session Storage tab.
I have temporarily encrypted these values as a workaround, but this is not a permanent solution.
Is there a way to securely hide these values using Angular? Any other suggestions or solutions?
Dealing with a similar problem, I approached it in the following manner:
Within my Authentication Guard, upon receiving query parameters, I store them in session storage in encrypted format. Subsequently, I direct the user to a link without query parameters. Upon accessing this link, I decrypt the stored values from session storage and display the desired outcome...
If you want to track changes in session storage, you can set up a Storage event listener using the following code snippet:
this.storageUpdate$ = fromEvent<StorageEvent>(window, 'storage').pipe(
filter((event) => event.storageArea === sessionStorage),
filter((event) => event.key === 'isLoggedIn'),
map((event) => event.newValue)
);
Once you have this set up, you can utilize it in your HTML like so:
<button *ngIf="(storageUpdate$ | async) == 'true' ? true : false">
Logout
</button>
When trying to declare an audio context, I encountered an error stating that window is undefined. I attempted declaring declare const window :any above window.Context, but the issue persists. Does anyone have a solution for this problem? window.AudioCont ...
In my Angular 7 application, I am utilizing the ms-adal-angular6 library to handle authentication flow and I am trying to understand the sequence of events in my code. After successfully authenticating with Azure Active Directory (AAD) using a logged-in u ...
I am a newcomer to Angular 4 and currently working on building an application that consists of nearly 50 components. All these components have the same constructor definition, meaning they all inject the same set of services. To simplify this process, I ...
I have successfully developed an app with a user authentication system. The first step is to verify if the user with the provided registration email already exists, and if not, I proceed to call the registration service. In the register.component.ts file: ...
I am currently working on a test automation project and utilizing protractor with the jasmine framework. I am facing an issue while dealing with an autocomplete selection drop-down (for example, a countries' name drop-down). I want to input keys into ...
Is it possible to place the TabView at the top on IOS rather than the bottom? ...
I have been attempting to bundle a group of classes into an Angular Library. I diligently followed the instructions provided at: https://angular.io/guide/creating-libraries: ng new my-pkg --no-create-application cd my-pkg ng generate library my-lib Subseq ...
After exploring the concept of Key Remapping in TypeScript, as shown in this guide, I am wondering if there is a way to automatically inherit property annotations from the original Type? type Prefix<Type, str extends string> = { [Property in keyo ...
I have three enums Country_INDIA, Country_USA,Country_AUSTRALIA. During runtime, the specific country name is determined (it could be either INDIA, USA, or AUSTRALIA). Is it possible to select the correct enum based on the country name at runtime? For in ...
Having trouble binding data with Angular 8, I attempted the following method: <div class="speed" style="background-image: url('http://example.com/assets/images/meter.png')" [ngStyle]="{'--p':result.percentage}"></div> The ...
Is there a way to assign individual values to each select element in a cell? I am using ReactGrid with react version 16 There seems to be an issue with the onchange function, and I'm struggling to find help import * as React from "react"; ...
In my function, I am trying to extract data from an object structured by an interface. I want this function to specifically resolve the property data from the data object. While it works when I have any as the return type, I believe there should be a more ...
i am trying to display some data on the form but encountering an error: TypeError: Cannot read property 'title' of undefined below is my component code : book:Book; getBook(){ var id = this.route.snapshot.params['id']; ...
I'm feeling a little uncertain about how to properly test my file when using an object with a function that returns void. Below are the details. type Pros={ studentid: StudentId pageId?: PageID closeForm: () => void } When it comes to creating ...
I'm currently working on implementing a hover effect on a div using an Angular ngClass directive. Within the template file, I have a div element with the class "list-item-container" that includes another div with the class "list-item." This "list-item ...
The startup file for .NET Core 2.2 has been configured as shown below: var key = Encoding.ASCII.GetBytes(AppSettings.Secret); services.AddAuthentication(x => { x.DefaultAuthenticateScheme = IISDefaults.AuthenticationScheme; ...
I am facing an issue with wrapping column headers in my HTML table. Some columns have four words like Pre Trading Follow Up and Post Trading Follow Up, while others have three words. I attempted to use the following CSS to wrap the text to multiple lines: ...
Within my project, I have two sibling components located in the SecondComponent folder. The SecondComponent consists of both the main component and its child component. Now, in the FirstComponent, I need to access the child component of the SecondComponent ...
I am working with two CSS classes named as below: .icon_heart{ color: #bdbdbd; } .icon_heart_red{ color: #a6b7d4;; } Within my HTML code, I have incorporated a heart icon. <div class="icon_heart" *ngIf="showheartIcon"> ...
Can TypeScript ensure the validity of key-value tuples in this function? function arrayToObject(array, mapper) { const result = {}; for(const item of array) { const [key, value] = mapper(item); result[key] = value; } return ...