Tips for Implementing Guard in Angular Applications Without Using Components

My objective is to trigger a method and redirect to component A or B when the link 'auth/login/:tokenKey' is accessed. However, for this specific link, no component is needed, just a method in the typescript file.

How can I achieve this?

GetTokenKeyGuard.ts

 canActivate(route: ActivatedRouteSnapshot) {

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

    return true;
  }

I want the path 'auth/login/:tokenKey' to run a process and then direct to the index page without using a component.

Unfortunately, the Guard does not work when I use the 'redirectTo' directive.

The Guard functions properly when used with a component.

Is it possible to use the guard without a component?

app-routing.module.ts

const routes: Routes = [
  { path: '', component: IndexComponent },
  { path: 'auth/login', component: LoginComponent },

  { path: 'auth/login/:tokenKey',
    canActivate: [GetTokenKeyGuard],
    redirectTo: '' }, //........................ Guard doesnt work.

  { path: 'auth/login/:tokenKey',
    canActivate: [GetTokenKeyGuard],
    component: LoginComponent }, //............. Guard works.
];

Answer №1

Here is the path you can utilize:

 const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'users/login', component: UserLoginComponent },

  { path: 'users/login/:securityToken',
    canActivate: [SecurityGuard],
    children: [] }
];


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

What is the best way to utilize JavaScript to determine if a particular word is present in a SharePoint text field, especially when the content of the text box is modified or updated

My SharePoint textfield is displaying strangely, with code that looks like this: <div class="ms-taxonomy-fieldeditor ms-taxonomy-fieldeditor-standard ms-taxonomy-writing" title="Category" style="width: 364px;"> <div id="ctl00_PlaceHolderMain_Ed ...

Assign the variable of one function to another function

I have a collection of buttons with usernames as values (such as jason, chan, brad, etc.). When a user clicks on a button, it is moved to a specific div. For example: <input type="button" onClick="nano();" id="name1" class="names" name="jason" value=" ...

Ways to invoke a jQuery plugin method from outside the plugin script

I have the following script code (function($) { $.fn.youamaAjaxLogin = function(options) { function start() { //start } .... Is there a way to call the start() function from outside? (func ...

The error message indicates that providing a number type instead of a string type to a parameter is causing an issue

This is my code snippet const currentTimeStamp = `${(parseInt(Date.now() / 1000))}`; const [roomName, setRoomName] = useState<string>(currentTimeStamp || ''); When running in production: An error occurs stating: Argument of type ' ...

Issue 415: The battle between x-www-form-urlencoded and JSON

The online application allows for 'application/json' format, however when using .ajax() with dataType set to 'json', it attempts to send data in 'application/x-www-form-urlencoded' format. What could be causing this behavior? ...

Switch the background color alternately from red to green every second

Need help with a webpage that changes the background color every second using JavaScript. The issue lies in figuring out how to correctly change the variable within the function. Here's an example of the code: <!DOCTYPE html> <html> ...

Adjust the appearance of input fields that exclusively have the value "1"

When designing my website, I encountered a problem with the style I chose where the number "1" looks like a large "I" or a small "L." I am wondering if there is a way to use JavaScript to dynamically change the font style for input fields that only contai ...

Converting information from an Excel spreadsheet into a JSON format

Looking for a way to extract values from an excel spreadsheet using Python and send them to a webpage for processing with javascript. I'm considering creating a dictionary object and returning it to javascript in JSON format. The values extracted fro ...

Verify user identity before sending directory in Express

I'm encountering an issue with authenticating users before they access an express directory file tree. While I can successfully authenticate users on all other pages, I'm facing difficulties with authentication on "/dat/:file(*)" even though I ha ...

Issue with spyOn function being called in Jasmine test for Angular 2

Within the initialization of my Angular component, there is a function: populateForm(id:String, index:number){ let blogs = this.blogsService.returnBlogs() blogs.map((blog:Blog)=>{ blog._id === id ? this.blogsService.populateForm.next({blog: ...

The URL is being modified, yet the page remains static in the React application

I've been working on setting up a router with react-router-dom, but I'm facing an issue where my URL gets updated without the page routing to the specified component. Here's a snippet from my App.js: import "./App.css"; import { Br ...

Expanding beyond the maximum width in a two-column layout (using TAILWIND CSS)

Before I pose my question, let me quickly go over the relevant code: The Homepage Component const Home = () => { return ( <div> <div> {questions.map((question) => ( <div key={question.id} className=" ...

Error: The argument provided cannot be assigned to a parameter that requires a string type, as it is currently a number

Currently, I am in the process of migrating some older websites to TypeScript. However, I keep encountering a type error during the build process. The specific error message is Type error: Argument of type 'number' is not assignable to parameter ...

The Ionic framework lacks support for the firebase and auth properties found in Firebase

Currently, I am developing a user-generated content feature along with buttons using ionic 5 and integrating it with the firebase app. I have been studying posts to incorporate them into my application. I am utilizing: "firebase": "^8.1.1&q ...

The defineProps<SomePropType>() method is not rendering the props as expected

I have various components, with a parent element where I attempted to pass props using the syntax defineProps<{}>(). The setup is simple, I have a types.ts file at the root level, a parent Vue file (referred to as CardItem), and multiple components. ...

Error when changing to Iframe: argument is incorrect - 'id' cannot be a string

Experiencing an issue with Webdriver: when attempting to pass a constant to frame() in the driver.switchTo() command, an error is thrown stating that id cannot be a string. This seems to contradict the information provided in the selenium documentation whe ...

Is there a way for me to insert my function into the button so that it can execute upon being clicked

<span>Create Request File for Activation</span> <input type="submit" value="Generate" class="submit" id="submit"/> I'm trying to link my function with the button above. How can I make it so that when ...

Using multiple GET methods on a single route in Express and Sequelize can lead to conflicts

I've created a simple product CRUD application with routes to search for products by ID and by name. However, when I send a request to http://localhost:4000/products?name=pen, the routes conflict with each other and I'm unable to retrieve the pro ...

The canvas element's drawImage() method fails to render the specified video thumbnail

I'm having trouble creating a function that displays a specific image from a video at a certain time frame. The function takes two inputs: the path to the video and the specific second where the image should be displayed. <!DOCTYPE html> <htm ...

Tips for inserting a div following every third element while using *ngFor

I'm currently working on an Angular project where I need to display a list of books. Each book is represented by the SmallBookView Component, and I want to use ngFor to iterate through multiple books. However, I also need to insert a div element after ...