Authentication in Angular- AuthGuard | CanActivate | CanActivateChild

hey in this tutorial we will see how to restrict certain users from accessing pages or services in angular application using can activate all the authentications are done using back-end service and it can either be a custom API or an earth-based authentication like google firebase I wrote a simple back-end with checks if the name is code and password is space and returns true or false server is running on node.js using mystify plugging in real project we need to integrate with database to fetch respective user information and password should always be encrypted before saving I have created an angular project using ng new earth guard and opened it in Visual Studio code since my angular CLI is buggy so I need to install angular dev kit manually [Music] will run ng serve again in app component HTML we will use router outlet to navigate to different pages and register all URLs in a floating dot modules or TS [Music] will export class applauding modules and import the same in F module dot TS [Music] and edit in imports will create two components home and login using ng generate component home an NG generate component login an in routing module we will import router module and routes from angular router and declare a constant of named routes of type routes and add two paths to it for path home [Music] load home component and for path others we will use wildcard star start and load login component an NG module we will import router modules for loop and pass the routes variable and export the same router module in the provider will keep it blank so now in the browser we can see that the air flows fine now in login component dot HTML we will add two input hood name and password we will use two-way binding and on click of the button we will get the login details from the server in login component we will define the login function and variable name and password code some error okay in F Model Ts we need to import four modules form angular forms and edit in imports now it's loading fine let's create a authorized service using ng generate service authorized import HTTP from angular HTTP initialize it in constructor and then we will define a function get auth token and call our REST API using post method and pass the name and the password form the input field [Music] [Music] [Music] and return the Pressman station and if any error occurs just console.log the error message we will leave the authorized service in our login component TS and initialize it in constructor an in login function we will call the cat auth token with name and password a nun promises of will check if s dot valid is true else alert login fail if login is valid we will store it in local storage for normal authentication we use local storage for sensitive information click banking and all we used session storage because in session storage on closing the browser around closing the tab the information aren't destroyed I already made a video on this check out the video for difference between session storage cookies and local storage mentioned in the description below we will use the plug-in ngx web storage will import HTTP module since we are using it in service clear and add it in import and similarly we will input ng to web storage [Music] [Music] [Music] in login component is we will add authorized service in providers an input local storage service from ngx web storage and initialize the same in constructor when the login is Valley we will save the user details in local storage user variable and navigate to the homepage using router 18 summer ok we need to import to Thomas [Music] [Music] now we can see that on login it navigates to home page let us edit the home page and populate the welcome with username in component we will retrieve user details from local storage service [Music] [Music] [Music] and assign the name to username we can see that welcome code and if you log in using poll which shows welcome poll we will add a logout option so in home component we will add logout button and call a logout function [Music] I'll just copy from login component and paste it in home component and edit it accordingly in browser will log out and try to access the home page we are able to access the home page but the user name is not showing because there is no logged in user we will now restrict unauthorized user from accessing this page for this we will just create a service or card using ng generate service or cult in the service we will implement can activate on angular router and initialize local storage service in constructor an inn can activate method we will check if user exists and if user is valid return true else return false and alert not logged in it didn't work we need to edit in a routing we will add can activate in home path and use odd guard service we will use a cool name or girl instead of or girl service and can define different types of odd guard and assign the same to particular path ok we need to add the oscar service in provider of F module TS [Music] so now when we try to access the homepage it throws me error not logged in and does not load the page we can define our own not authorized space and redirect on failure [Music] now we restrict a user from accessing a child routes we will generate a child component using ng generate component child and put it under home component for path CH [Music] [Music] [Music] in the browser we can see that we can access the child component so inept routing we will use can activate child which will authorize all the child component using path card we can have multiple children to be scanned I will just comment it to keep it simple and in Concord service we will implement can activate child and have the same logic as about will change the alert to differentiate it so we are able to access the same home page without login but when I try it for the child component it throws me error not allowed [Music] and if I login successfully and can able to access all the pages first method is mainly used for authentication and a second one is used for authorization that's all for this tutorial if the video is of any help then hit the like icon for other angular cloud and node.js tutorial subscribe to the channel cost phase and click notification well icon for upcoming live sessions for any queries comment below thanks for watching

Channel: CodeSpace

Views: 24,752

Keywords: Authentication in Angular, CanActivate, CanActivateChild, AuthGuard, angular authentication, angular authorization, restrict users in angular, angular, codeSpace, yt:cc=on

Id: bYUh4hf2p5E

Length: 19min 34sec (1174 seconds)

Published: Thu Apr 19 2018