Top location for securely storing information in Angular 8

I have developed a web application using Angular 8.

My goal is to secure routes and pages with dynamic access levels.

For instance, I want to verify if a user has access to a specific route, and if not, redirect them to the login page.

To do this, I currently store a list in the local storage and check the access level every time by fetching the list from local storage.

However, I am now questioning whether local storage is a secure place to store this security information.

Does anyone have suggestions for a better and more secure location to store this information?

javascriptangulartypescript

Answer №1

It is recommended to use a separate API for this purpose. In your Angular application, you can utilize the CanActivate route guard to check for access each time a user attempts to navigate to a specific page.

Alternatively, you can maintain a global service to keep track of user access data. After the user logs in, fetch data from the backend of your application (through a one-time API call), store it in the global data service variable, and return it as an observable whenever needed. Check for relevant authorization in your Angular application whenever a user tries to access a specific route, as the global data service is accessible at the root level and can be accessed by all components throughout.

Another strategy is to create and store authorization details in NgRxStore, using the values stored in it when a user is trying to access a specific route.

Answer №2

In my opinion, it would be beneficial to develop a specialized API for this specific task. By utilizing the API, you can easily determine and set the appropriate access levels required.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Fixed Navigation - Employing stickUp.js extension

* { box-sizing: border-box; } body { margin: 0; padding: 0; font-weight: 500; font-family: 'Helvetica Neue', sans-serif; } main {} .bckgrnd { background-position: center center; background-repeat: no-repeat; background-attachment: ...

javascriptjqueryhtmlcss

How can I use Angular to dynamically open a video that corresponds to a clicked image?

I need assistance with a functionality where clicking on an image opens a corresponding video on the next page. The issue is that all images have the same ID, making it difficult to link each image to its respective video. Below is the data I am working ...

javascriptangulartypescript

AJAX successfully completes, but no response is received

I've been struggling to get the success function in my AJAX call to trigger. I know everything is set up correctly because when I make a request to my API, I can see that it's hitting the URL and the server is responding with an HTTP 200 status. ...

javascriptjqueryruby-on-railsajax

Angular 7 is throwing an error message that reads: "Module not found: 'AppModule'"

When running ng build, an error occurs without providing any specific details like the file name. This project is an ASP.NET Core app with Angular 7. c:\Users\siva\Myapp\ClientApp>ng build Date: 2019-08-08T13:22:52.205Z Hash: 3cf960 ...

angulartypescriptasp.net-core.net-core

Achieving proper HTML element order?

Here is the HTML page I am working with: Click here to view the code on jsfiddle <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Extended UI</title> <style type="text/css"> .header{ padding-rig ...

javascriptjqueryhtmlcss

Is there a way to identify the specific list item that a draggable element has been dropped onto within a jQuery sortable with connected draggable lists?

Take a look at these two sets of items: user's inventory <ul id='list1'> <li>Apple</li> <li>Banana</li> </ul>available products <ul id='list2'> <li>Orange</li> ...

javascriptjqueryhtmljquery-ui

Managing JSON object with irregular data in Angular 7: Best Practices

When the service returns data in a specific format, I am able to view the data in the developer tools. {"results":{"BindGridDatatable":[{"ID":"0005","Name":"Rohit"}, {"ID":"0006","Name":"Rahul"}], "Totalvalue":119}} ...

arraysjsonangularangular6angular7

Exploring Next.js: Advanced capabilities of shallow routing in combination with dynamic routes

Many people seem to be confused about the behavior of shallow routing with dynamic routes in Next.js. When attempting shallow routing, the page is refreshed and the shallow option is ignored. Let's consider a scenario where we start on the following ...

javascriptreactjsroutesnext.jsserver-side-rendering

The object is given a value in the form of a string, even though it is a strongly-typed variable

I'm encountering something unusual in my code. In the following example, there is a (change) event that captures the current value selected by the user from a dropdown menu. <div style="padding-right: 0; width: 100%;"> <label st ...

javascriptangulartypescript

Persistent column menu in ag-grid

Is there a way to include a menu for each row within a sticky column in Ag-grid? I couldn't find any information about this feature in the official documentation, so I'm unsure if it's even possible. I've attempted several methods, but ...

javascripthtmlcssag-grid

Is it possible to use Node.js child processes without carriage returns?

My Node.js script is set up to handle some database operations by creating child processes using the spawn functionality. However, I encountered a strange issue where the output stopped displaying carriage returns. Here's an example of what was happen ...

javascriptnode.jsbashmacos

Navigating with React Router Dom and parsing objects in search parameters

Currently, I am utilizing React Router Dom v6 and require the ability to retain object search parameters within the URL. My current approach involves: const [searchParams, setSearchParams] = useSearchParams(); const allSearchParams = useMemo(() => { ...

javascriptreactjsreact-router-dom

Troubleshooting JavaScript Oscilloscope: resolving audio playback problems

I am exploring JavaScript for the first time and came across an interesting oscilloscope example on this GitHub page. It seemed quite easy to follow initially, but I am facing an issue with audio playback. Although the HTML5 audio element loads the audio f ...

javascriptaudio

Validating CodeIgniter using advanced JavaScript techniques

When trying to insert data using a JavaScript and Bootstrap validation script, I encountered an issue. After entering a value in the text box, a warning pops up stating that the input value already exists. What should I modify in my script to address this ...

javascriptphpjquerytwitter-bootstrapcodeigniter

Update database upon drag-and-drop using jQuery

I have a dataset (shown below) that undergoes sorting by 'section'. Each item is placed into a UL based on its section when the page loads. My goal is to automatically update the section in the database when a user drags an item to a different s ...

javascriptphpjqueryajaxdrag-and-drop

What could be the reason behind getting a useLayoutEffect error when using renderToString to render a Material-UI component?

Currently, I am utilizing React version 16.12.0 along with @MaterialUI/core version 4.8.1. The challenge I am facing involves creating a custom icon for a React Leaflet Marker. The icon in question is a Fab component sourced from Material-UI. In order to ...

javascriptreactjsmaterial-uireact-leaflet

Integrating Node.js with static HTML documents

I'm currently exploring methods for making node.js API calls from static HTML. While I've considered using Express and similar template engines, I am hesitant since they would require me to adjust my existing HTML to fit their templates. Typicall ...

javascripthtmlnode.jstemplatesexpress

transform an array encoded in base64 format into a JSON object

I am encountering an issue where the base64 array I'm trying to send to an API is coming up empty. Here's a breakdown of what I'm doing: Firstly, I have an array of files with images in my code: [0: File {name: '766_generated.jpg' ...

angulartypescript

The specified property ID is not found in the User type

I recently started using TypeScript and decided to practice by implementing user authentication with Passport.js in a small application. Challenge The issue I'm facing is related to instructing Passport.js to store the id property of the user in the ...

node.jstypescriptpassport.jspassport-local

A guide on extracting the text content from an anchor tag by using xPath() with a combination of selenium and Mocha

I have successfully chosen an <a> tag. My goal is to display the text of the anchor tag, but I am facing difficulties. The technologies being used are selenium, mocha, javascript, and phantomJS This is the detailed script: var assert = require(&ap ...

javascriptseleniumxpathmocha.js