{"id":680,"date":"2023-03-21T05:00:00","date_gmt":"2023-03-21T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=680"},"modified":"2023-03-20T15:07:12","modified_gmt":"2023-03-20T22:07:12","slug":"how-to-use-angular-route-guards","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/how-to-use-angular-route-guards\/","title":{"rendered":"How to use Angular route guards?"},"content":{"rendered":"\n<p>The Angular router has <a href=\"https:\/\/angular.io\/guide\/router-tutorial-toh#milestone-5-route-guards\" target=\"_blank\" rel=\"noopener\" title=\"\">5 different route guards<\/a> that can be used to control user navigation in the browser.<\/p>\n\n\n\n<p>Such guards can be used in scenarios such as:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Preventing users from navigating to parts of an application without authorization<\/li>\n\n\n\n<li>Preventing users from leaving a form before it is saved or completed<\/li>\n\n\n\n<li>Making sure the user is logged in before proceeding to the next page<\/li>\n<\/ul>\n\n\n\n<p>A guard is a <strong>function <\/strong>(class-based guards are <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/whats-new-in-angular-15-2\/\" target=\"_blank\" rel=\"noopener\" title=\"\">deprecated as of Angular 15.2<\/a>) that can return three different values:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>true<\/code> if we want to allow the user to proceed (then the navigation happens)<\/li>\n\n\n\n<li><code>false<\/code> if we want to prevent the user from proceeding (then the navigation doesn&#8217;t happen)<\/li>\n\n\n\n<li>A <code><a href=\"https:\/\/angular.io\/api\/router\/UrlTree\" target=\"_blank\" rel=\"noopener\" title=\"\">UrlTree<\/a><\/code> if we want to redirect the user to another component (usually a login component or an error component)<\/li>\n<\/ul>\n\n\n\n<p>Sometimes, we want to ask a server about the user, which means that our guard is going to do asynchronous work. That&#8217;s fine because guards can return an <code>Observable<\/code> or a <code>Promise<\/code> of the above values, which means that a guard can return any of the six following types:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"688\" height=\"35\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/03\/image-29.png\" alt=\"\" class=\"wp-image-682\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/03\/image-29.png 688w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/03\/image-29-300x15.png 300w\" sizes=\"auto, (max-width: 688px) 100vw, 688px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>Any route can be protected by one or more guards. In the router config, we define an array of guards for each route as follows:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"293\" height=\"127\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/03\/image-30.png\" alt=\"\" class=\"wp-image-683\"\/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>The above code means that in order to access the path <code>\/team\/:id<\/code>, a user has to satisfy the requirement of <code>canActivateTeam<\/code>, a guard function that returns one of the values documented above.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Angular router has 5 different route guards that can be used to control user navigation in the browser. Such guards can be used in scenarios such as: A guard is a function (class-based guards are deprecated as of Angular 15.2) that can return three different values: Sometimes, we want to ask a server about [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,25],"tags":[],"class_list":["post-680","post","type-post","status-publish","format-standard","hentry","category-angular","category-routing"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/680","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=680"}],"version-history":[{"count":2,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/680\/revisions"}],"predecessor-version":[{"id":684,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/680\/revisions\/684"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=680"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=680"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=680"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}