Tips for Accessing a Path Segment in Angular

Is there a way to retrieve the tokenKey value from the URL path in the file GetTokenKeyGuard.ts?

I attempted to do so using the following code, but it did not work as expected:

canActivate(route: ActivatedRouteSnapshot) {

    localStorage.setItem('token_key', route.queryParams.tokenKey);

    return true;
  }

This approach failed because tokenKey is not passed as a query parameter (i.e., not like localhost/path?tokenKey=blabla).

const routes: Routes = [
  { path: '', component: IndexComponent },
  { path: 'auth/login', component: LoginComponent },
  { path: 'auth/login/:tokenKey', canActivate: [GetTokenKeyGuard], component: LoginComponent },
];

How can we access the tokenKey variable from the URL path in the file GetTokenKey.ts?

Answer №1

I stumbled upon the solution:

Instead of using queryParams, we should use params.

localStorage.setItem('token_key', route.params.tokenKey);

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

When using React, draggable components with input fields may lose their ability to receive focus when clicking on the input field

<Draggable axis="y" grid={[135,135]} onStop={this.handleStop} defaultPosition={{x: this.props.task.positionX, y: this.props.task.positionY,}}> <div id="edit-task-component"> <form onSubmit={this.handleSubmit} id=" ...

Having trouble dynamically inserting a row into a Jquery datatable

When working with jQuery Datatable, I am currently involved in two main functions: Filtering and searching the table based on select tags. Dynamically adding rows to the datatable using Ajax. However, when adding a row dynamically, the row count increase ...

Converting HTML table data into a JavaScript array

On my website, I have an HTML table that displays images in a carousel with their respective positions. The table utilizes the jQuery .sortable() function to allow users to rearrange the images by dragging and dropping. When an image is moved to the top of ...

The API for /api/campaign/dynamicid has been resolved but no response was sent, potentially causing delays in processing requests within Next.js

Encountering a problem with my Amazon SES code in Next.js. Unsure where the mistake lies, seeking assistance to resolve the error. Feel free to ask if you have any questions. sendmail.js This is where I encountered an issue in the sendmail.js file while ...

Having trouble retrieving documents from a nested collection in Firebase

I am attempting to retrieve all documents from Firebase that are based on a query. Here is my current firebase structure: https://i.stack.imgur.com/tXrX8.png Even though I have two documents inside the "ListaFavorite" collection, when I check using empty ...

Prevent keyboard overlay during TextField interaction in a NativeScript app

When dealing with a NativeScript app view that includes a TextField component for user input, the native Keyboard Input tends to overlay the text field. Although it does not prevent users from entering text, it disrupts the overall user experience and affe ...

What is the best method for storing an image from a webpage onto the server using JavaScript?

Is there a way to save the image with the id 'canvasaImg' on my webpage to the server using JavaScript, or does it need to be done with PHP? ...

Modifying the state when an array within another array changes using react hooks

I am faced with a challenge involving an array of objects nested within arrays of objects. My goal is to update a specific object value in the inner array. For example: const [datas, setDatas] = useState([ { id: 1, name: 'john' ...

Using jQuery to dynamically load custom post type data in WordPress upon clicking

Let me explain my current project setup. I have developed a custom post type called "People" and have created several individual posts within it. At the moment, I have successfully implemented a modal using JavaScript with static content. Instead of disp ...

Is there a way to utilize JavaScript to access and read an array of data from a local JSON file

I need to load a .json file into a global variable that can be accessed across all web pages using AJAX and JavaScript. How can I achieve this? I want to retrieve values from the variable using an index, like accessing my_var[1].img. Despite searching thro ...

What method can I use to ensure that the sidebar stays fixed at a particular div as the user continues to scroll down the

Is there a way to automatically fix the sidebar once the user scrolls down and hits the top of the .Section2? Currently, I have to manually enter a threshold number which can be problematic due to varying positions across browsers and systems. Fiddle htt ...

Issues encountered when using AngularJS2's post method to send data to an ASP.NET Core backend result

I recently delved into learning Angular2 and Asp.net core, but I encountered an issue when trying to post an object. Here is the relevant code snippet: Service.ts file: export class SubCategoryService { //private headers: Headers; constructor(private htt ...

PHP AJAX Request Failing to Transfer Files

I am having trouble with sending files in a PHP AJAX Request: Here is the form code: <form class="frmContact" action="#" method="post"> <div class="col-md-6"> <input type="hidden" name="emailTo" id= ...

Adding pixels to the top position with jQuery in Angular 2

I am trying to adjust the position of my markers when the zoom level is at 18 or higher by adding 10px upwards. However, my current approach doesn't seem to be working as expected. Can someone please assist me with this issue? You can view the code sn ...

Spirit.py navigates using javascript

Having trouble with Ghost.py. The website I'm trying to crawl uses javascript for paginated links instead of direct hrefs. When I click on the links, selectors are the same on each page so Ghost doesn't wait since the selector is already present. ...

What is the reason for the svg animateTransform only being triggered on the initial item?

When hovering over the first item, the animations for the others would also trigger. However, when hovering over the second item, the other items wouldn't work. How can I ensure that each item's animation triggers one by one? body { displa ...

Error occurs when JSON.parse is used

<!DOCTYPE html> <html> <head> <title></title> </head> <body> <script> var data = "{ 'name': 'John' }"; var result = JSON.parse(data); </script> ...

Utilize dependency injection or define dependencies with the following tags: 1) ionic

I am facing confusion about whether to inject a dependency or declare it in the constructor function. Here is an example: import { DOCUMENT } from '@angular/common'; import { ElementRef } from '@angular/core'; constructor(private el ...

Tips for streamlining interface initialization and adding items to it

I have designed an interface that includes another interface: export interface Parent { children: Child[]; } export interface Child { identifier: string; data: string; } Is there a more efficient way to initialize and add items to the array? Curren ...

Ant Design: How can a SubMenu be turned into a clickable link?

Currently, I am developing a Next.js application and utilizing antd's Menu and Submenu components for my NavBar. My goal is to make the SubMenu items clickable links. How can I achieve this functionality? <Menu className={styles.menuContainer} mode ...