{"id":59900,"date":"2018-05-03T16:02:15","date_gmt":"2018-05-03T10:32:15","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=59900"},"modified":"2024-04-12T14:20:50","modified_gmt":"2024-04-12T08:50:50","slug":"angular-router-and-route-protection","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-router-and-route-protection\/","title":{"rendered":"Angular Router and Route Protection"},"content":{"rendered":"

Angular Router and Route Protection<\/h1>\n

Angular Router is an official Angular routing library, written and maintained by the Angular Core Team.<\/p>\n

It\u2019s a JavaScript router implementation that\u2019s designed to work with Angular and is packaged as @angular\/router.<\/p>\n

First of all, Angular Router takes care of the duties of a JavaScript router:<\/p>\n

it activates all required Angular components to compose a page when a user navigates to a certain URL
\nit lets users navigate from one page to another without page reload
\nit updates the browser\u2019s history so the user can use the back and forward buttons when navigating back and forth between pages.<\/p>\n

In addition, Angular Router allows us to:<\/p>\n

redirect a URL to another URL
\nresolve data before a page is displayed
\nrun scripts when a page is activated or deactivated
\nlazy load parts of our application.<\/p>\n

In this article, we\u2019ll learn how to set up and configure Angular Router, how to redirect a URL and how to use Angular Router to resolve todos from our back-end API.<\/p>\n

In the next article, we\u2019ll add authentication to our application and use the router to make sure some of the pages can only be accessed when the user is signed in.<\/p>\n

 <\/p>\n

Route Protection<\/strong><\/p>\n

Angular comes with a number of baked-in features which are tremendously helpful for handling authentication. I think my favorite is probably its HttpInterceptor interface, but right next to it would be route guards. Let\u2019s take a look at what Angular\u2019s route guards are and how to use them to help with authentication in your Angular apps.<\/p>\n

What are Route Guards?<\/strong><\/p>\n

Angular\u2019s route guards are interfaces which can tell the router whether or not it should allow navigation to a requested route. They make this decision by looking for a true or false return value from a class which implements the given guard interface.<\/p>\n

There are five different types of guards and each of them is called in a particular sequence. The router\u2019s behavior is modified differently depending on which guard is used. The guards are:<\/p>\n

CanActivate: Check if a user has access
\nCanActivateChild: Check if a user has access to any of the child routes
\nCanDeactivate: Can a user leave a page? For example, they haven’t finished editing a post
\nResolve: Grab data before the route is instantiated
\nLazy loading feature modules.
\nCanLoad: Check to see if we can load the routes assets<\/p>\n

CanActivate<\/strong><\/p>\n

Guards are implemented as services that need to be provided so we typically create them as @Injectable classes.<\/p>\n

Guards return either true if the user can access a route or false if they can\u2019t.<\/p>\n

They can also return an Observable or Promise that later on resolves to a boolean in case the guard can\u2019t answer the question straight away, for example it might need to call an API. Angular will keep the user waiting until the guard returns true or false.<\/p>\n

Lets create a simple CanActivate guard.<\/p>\n

First we need to import the CanActivate interface, like so:<\/p>\n

import {CanActivate} from “@angular\/router”;<\/p>\n

Then lets create an Injectable class called AlwaysAuthGuard which implements the canActivate function, like so:<\/p>\n

class AlwaysAuthGuard implements CanActivate {
\ncanActivate() {
\nconsole.log(“AlwaysAuthGuard”);
\nreturn true;
\n}
\n}<\/p>\n

This guard returns true all the time, so doesn\u2019t really guard anything. It lets all users through but at the same time our guard logs “AlwaysAuthGuard” to the console so we can at least see when it\u2019s being used.<\/p>\n

We need to provide this guard, for this example lets configure it via our NgModule, like so:<\/p>\n

@NgModule({
\n.
\n.
\nproviders: [
\n.
\n.
\nAlwaysAuthGuard
\n]\n})<\/p>\n

Finally we need to add this guard to one or more of our routes, lets add it to our ArtistComponent route like so:<\/p>\n

const routes: Routes = [
\n{path: ”, redirectTo: ‘home’, pathMatch: ‘full’},
\n{path: ‘find’, redirectTo: ‘search’},
\n{path: ‘home’, component: HomeComponent},
\n{path: ‘search’, component: SearchComponent},
\n{
\npath: ‘artist\/:artistId’,
\ncomponent: ArtistComponent,
\ncanActivate: [AlwaysAuthGuard],
\nchildren: [
\n{path: ”, redirectTo: ‘tracks’},
\n{path: ‘tracks’, component: ArtistTrackListComponent},
\n{path: ‘albums’, component: ArtistAlbumListComponent},
\n]\n},
\n{path: ‘**’, component: HomeComponent}
\n];<\/p>\n

IT Professionals, Web Developers, web programmers, IT students can Apply for the certification course and get ahead.<\/strong><\/p>\n

\"\"<\/a><\/p>\n