In this article, I will discuss safeguarding Routes<\/strong> redirecting the user elsewhere, using also a new feature introduced in Angular v18<\/strong>.<\/p>\n\n\n\n But before we proceed, let\u2019s have a brief review of Angular Router<\/strong>\u2026<\/p>\n\n\n\n Angular Router<\/strong> library allows you to manage navigation within your Angular application, defining a list of Routes<\/strong>.<\/p>\n\n\n\n Each Route<\/strong> is defined by a series of information, such as the path to access it, the Angular component to load, child Routes,<\/strong> and much more:<\/p>\n\n\n You can protect one or more Routes<\/strong>, restricting the access or the exit, based on certain conditions, using functions called Guards<\/strong>:<\/p>\n\n\n There are four types of Angular Guards<\/strong>, each with a different role:<\/p>\n\n\n\n Note:<\/strong> originally, Guards<\/strong> were implemented as Injectable services<\/strong>. Following the introduction of the Furthermore, you can use Resolver<\/strong> functions to prepare data for a Route<\/strong>:<\/p>\n\n\n Using Resolvers<\/strong> is a great approach to ensure the presence of data before accessing a Route<\/strong>, avoiding dealing with missing data in a page.<\/p>\n\n\n Now that I covered the basics, let\u2019s see how to protect your Routes<\/strong> by redirecting users elsewhere.<\/p>\n\n\n\n Angular Guards<\/strong> allow you to prevent access or exit to one or more Routes<\/strong>, blocking navigation.<\/p>\n\n\n\n However, to ensure a smoother user experience, it is often preferable to redirect the user to another Route<\/strong>.<\/p>\n\n\n\n Thanks to Guards<\/strong>, we can achieve this very easily, starting a new navigation before blocking the current one:<\/p>\n\n\n
\n\n\n\nAngular Router Guards and Resolvers<\/h2>\n\n\n\n
import<\/span> { Route } from<\/span> '@angular\/router'<\/span>;\n<\/span><\/span>import<\/span> { MyFeatureComponent, MyFeatureGuard } from<\/span> '.\/my-feature'<\/span>;\n<\/span><\/span>\n<\/span><\/span>const<\/span> routes: Route[] = [\n<\/span><\/span> {\n<\/span><\/mark> path: 'my-feature'<\/span>,\n<\/span><\/mark> component: MyFeatureComponent,\n<\/span><\/mark> canActivate: [MyFeatureGuard],\n<\/span><\/mark> data: {\n<\/span><\/mark> id: \"my-feature-id\"<\/span>\n<\/span><\/mark> }\n<\/span><\/mark> }\n<\/span><\/mark>];\n<\/span><\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\nimport<\/span> { Route } from<\/span> '@angular\/router'<\/span>;\n<\/span><\/span>import<\/span> { MyService } from<\/span> '.\/my-feature'<\/span>;\n<\/span><\/span>\n<\/span><\/span>const<\/span> myRoute: Route = [\n<\/span><\/span> path: 'my-feature'<\/span>,\n<\/span><\/span> canMatch: [()<\/span> =><\/span> inject(MyService).canMatch()],\n<\/span><\/mark> canActivate: [()<\/span> =><\/span> inject(MyService).canActivate()],\n<\/span><\/mark> canActivateChild: [()<\/span> =><\/span> inject(MyService).canActivateChild()],\n<\/span><\/mark> canDeactivate: [()<\/span> =><\/span> inject(MyService).canDeactivate()],\n<\/span><\/mark>];\n<\/span><\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n\n
canMatch<\/strong><\/code>: used to verify that a Route<\/strong> can be loaded. You can define multiple Routes<\/strong> for a single path and use this guard to select only one based on certain conditions;<\/li>\n\n\n\ncanActivate<\/strong><\/code>: used to determine whether a user can activate a particular Route<\/strong>. For example, you can use it to control access to pages reserved only for certain users;<\/li>\n\n\n\ncanActivateChild<\/strong><\/code>: similar to canActivate<\/strong><\/code>, but it controls also the access to child Routes<\/strong> of a main Route<\/strong>. It runs on every navigation towards a child Route<\/strong>, even if it started from another child Route<\/strong>;<\/li>\n\n\n\ncanDeactivate<\/strong><\/code>: used to verify whether a user can exit a given Route<\/strong>. For example, you can use it to ask for confirmation before leaving a page.<\/li>\n<\/ul>\n\n\n\n\n
inject()<\/strong><\/code> function, it was possible to define them as functions. As a result, Injectable Guards are currently deprecated<\/strong>.<\/p>\n<\/blockquote>\n\n\n![\"\"](\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/04\/image-6.png\")
import<\/span> { Route } from<\/span> '@angular\/router'<\/span>;\n<\/span><\/span>import<\/span> { MyService } from<\/span> '.\/my-feature'<\/span>;\n<\/span><\/span>\n<\/span><\/span>const<\/span> myRoute: Route = [\n<\/span><\/span> path: 'my-feature'<\/span>,\n<\/span><\/span> resolve: {\n<\/span><\/mark> user: ()<\/span> =><\/span> inject(MyService).getUserInfo(),\n<\/span><\/mark> config: ()<\/span> =><\/span> inject(MyService).getUserConfig()\n<\/span><\/mark> }\n<\/span><\/mark>];\n<\/span><\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n![\"\"](\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/04\/image-7.png\")
\n\n\n\nUse Guards and Resolvers to redirect navigation<\/h2>\n\n\n\n
import<\/span> { inject } from<\/span> '@angular\/core'<\/span>;\n<\/span><\/span>import<\/span> { Route, Router } from<\/span> '@angular\/router'<\/span>;\n<\/span><\/span>import<\/span> { MyPage } from<\/span> '.\/pages\/my-page'<\/span>;\n<\/span><\/span>\n<\/span><\/span>const<\/span> route: Route = {\n<\/span><\/span> path: 'my-page'<\/span>,\n<\/span><\/span> component: MyPage,\n<\/span><\/span> canActivate: [\n<\/span><\/span> ()<\/span> =><\/span> {\n<\/span><\/span> const<\/span> router = inject(Router);\n<\/span><\/span> router.navigate(['.\/my-other-page'<\/span>]);\n<\/span><\/mark> return<\/span> false<\/span>;\n<\/span><\/mark> },\n<\/span><\/span> ],\n<\/span><\/span>};\n<\/span><\/span><\/code><\/span>